canvas基础

2023-10-17 16:14:04

一、canvas介绍

1.canvas是HTML5新增的一个双闭合标签，它目前能够提供2D图形的绘制，为数据可视化提供基础。它就相当于一块画布，js是画笔。为了显示方便，以下的所有例子都给canvas加了1像素的黑色外边框的样式。

2.canvas注意点

--canvas标签浏览器默认是一张300*150像素的图片。

--canvas标签内部书写的文字或其他标签等都不会显示。

--canvas标签可以设置width|height属性，来确定画布的宽高，宽高不要在css中书写，因为当在canvas标签中设置width|height属性时，css中设置的宽高会无效。并且坐标体系会出现一些问题，总之，要设置画布大小时，通过标签内属性去设置。

3.基础使用

对于一个canvas标签，通过其调用getContext(‘2d’)方法，返回一个画笔对象（上下文对象），通过返回的对象来进行图形的绘制。

<canvas width="400px" height="200px"></canvas>
<script>
    const canvas = document.querySelector('canvas')
    // 获取js画笔（上下文）
    const context = canvas.getContext('2d')      
</script>

二、canvas基础使用

1.绘制一个线段

通过moveTo(x轴，y轴)方法绘制起始点，通过lineTo(x，y)绘制其他点，x、y轴只能写数字，不能加px，调用closePath()可以闭合图形，最后调用stroke()开始绘制图形。

<canvas width="400px" height="200px"></canvas>
<script>
        const canvas = document.querySelector('canvas')
        // 获取js画笔（上下文），2d必须小写
        const context = canvas.getContext('2d')

        // 画线段
        // 绘制起始点
        context.moveTo(100,100)
        // 绘制其他点
        context.lineTo(200,200)
        context.lineTo(300,100)

        // 设置图形填充颜色
        context.fillStyle = 'red'
        // 调用方法填充
        context.fill()

        // 设置图形边的样式
        context.lineWidth = '5px'
        // 设置图形边的颜色
        context.strokeStyle = 'yellow'

        // 将图形闭合
        context.closePath()
        // 开始绘制
        context.stroke()
</script>

填充颜色：fillStyle = '颜色'，调用fill确定填充（此方法需在stroke之前调用）。

设置图形边界宽度：lineWidth = '10px'（px可以不加）。

设置图形边界颜色：strokeStyle = '颜色'。

2.绘制一个矩形

2.1方法一：strokeRect()

通过此方法绘制的矩形，不能够填充颜色，只是描边而已。需要传递四个参数，分别为（x坐标，y坐标，宽度，高度），四个数字都可以为负数，负数表示反方向绘制，超出canvas画布的形状不会显示。

<canvas width="500px" height="400px"></canvas>
<script>
    const canvas = document.querySelector('canvas')
    const context = canvas.getContext('2d')
    // 绘制矩形方法1
    context.strokeRect(-100,200,200,200)
</script>

2.2方法二：fillRect()

通过此方法绘制的矩形，可以通过fillStyle = ‘颜色’来设置填充颜色，并且可以不写fill()方法就可以完成填充（与绘制线段时不同），注意fillStyle应该书写在fillRect()之前，否则无效。

<canvas width="500px" height="400px"></canvas>
<script>
    const canvas = document.querySelector('canvas')
    const context = canvas.getContext('2d')
    // 绘制矩形方法2
    // 填充颜色应该在fillRect之前
    context.fillStyle = 'cyan'
    context.fill()
    context.fillRect(400,100,100,200)
</script>

3.绘制一个圆形

通过arc()方法绘制圆形，首先调用beginPath()方法，表示开始绘制圆形（实测不写也行），最后要调用stroke()方法进行绘制。如果要填充颜色，则填充颜色需要在arc()方法之后。

小总结：对于填充颜色，如果绘制的图形需要stroke()方法才能够完成绘制（如圆形），那么填充颜色的代码要放在stroke之前，绘制图形的方法之后；如果不需要stroke方法就能完成绘制（如矩形），那么填充颜色的代码要放在绘制图形的方法之前。

arc()方法需要传递六个参数，分别为x坐标、y坐标、半径r、开始弧度、结束弧度、是否逆时针(如果不传递，则顺时针)

注意点：此弧度坐标与数学中的坐标系不同，数学中一般以逆时针从0增加到2Π，反向则为负数。

canvas基础

此弧度坐标，以水平线为0，顺时针增加到2Π，逆时针为负数。与数学中的极坐标系大致相反。

canvas基础

 举例

<canvas width="400px" height="300px"></canvas>
    <script>
        const canvas = document.querySelector('canvas')
        const context = canvas.getContext('2d')
        // 绘制圆形
        context.beginPath()
        context.arc(200,200,50,0,-Math.PI/2,true)
        context.fillStyle = 'red'
        context.fill()
        context.stroke()
    </script>

canvas基础

<canvas width="400px" height="300px"></canvas>
    <script>
        const canvas = document.querySelector('canvas')
        const context = canvas.getContext('2d')
        // 绘制圆形
        context.beginPath()
        context.arc(200,200,50,0,Math.PI/2,true)
        context.fillStyle = 'red'
        context.fill()
        context.stroke()
    </script>

 canvas基础

 4.清除画布与绘制文字

通过clearRect(x，y，宽，高)可以清除画布；通过fillText("文字"，x，y)可以设置文字与文字位置；通过font = "20px  微软雅黑"可以设置文字样式。

<canvas width="400px" height="300px"></canvas>
    <script>
        const canvas = document.querySelector('canvas')
        const context = canvas.getContext('2d')
        context.fillStyle = 'cyan'
        context.fillRect(100,100,200,100)
        // 清除部分画布
        context.clearRect(100,100,30,30)

        // 更改颜色，字体颜色也是cyan颜色
        context.fillStyle = 'red'
        context.font = '20px 微软雅黑'
        context.fillText('数据可视化',150,150)
    </script>

canvas基础

三、柱状图小案例

canvas基础

<canvas width="840" height="440"></canvas>
    <script>
        const canvas = document.querySelector('canvas')
        const ctx = canvas.getContext('2d')
        // 左侧边
        ctx.moveTo(100,90)
        ctx.lineTo(100,400)
        // 图形边的颜色
        ctx.strokeStyle = '#666'
        ctx.stroke()
        // 底边
        ctx.moveTo(95,395)
        ctx.lineTo(720,395)
        ctx.stroke()
        // 底边文字
        ctx.font = '12px 微软雅黑'
        ctx.fillText('0',85,398)
        
        // 往上的五条横边,每次减60px
        ctx.moveTo(95,335)
        ctx.lineTo(720,335)
        ctx.stroke()
        // 文字
        ctx.font = '12px 微软雅黑'
        ctx.fillText('30',80,338)

        ctx.moveTo(95,275)
        ctx.lineTo(720,275)
        ctx.stroke()
        // 文字
        ctx.font = '12px 微软雅黑'
        ctx.fillText('60',80,278)

        ctx.moveTo(95,215)
        ctx.lineTo(720,215)
        ctx.stroke()
        // 文字
        ctx.font = '12px 微软雅黑'
        ctx.fillText('90',80,218)

        ctx.moveTo(95,155)
        ctx.lineTo(720,155)
        ctx.stroke()
        // 文字
        ctx.font = '12px 微软雅黑'
        ctx.fillText('120',75,158)

        ctx.moveTo(95,95)
        ctx.lineTo(720,95)
        ctx.stroke()
        // 文字
        ctx.font = '12px 微软雅黑'
        ctx.fillText('150',75,98)

        // 底边每个柱状图的分隔点155px
        ctx.moveTo(255,395)
        ctx.lineTo(255,400)
        ctx.stroke()
        ctx.moveTo(410,395)
        ctx.lineTo(410,400)
        ctx.stroke()
        ctx.moveTo(565,395)
        ctx.lineTo(565,400)
        ctx.stroke()

        // 柱状图名称,每次加 77.5 * 2 - 12.5 = 142.5
        ctx.fillText('食品',165,410) 
        ctx.fillText('数码',320,410) 
        ctx.fillText('服饰',475,410) 
        ctx.fillText('箱包',630,410) 

        // 画矩形
        ctx.fillStyle = 'red'
        ctx.fillRect(110,195,135,200)
        ctx.fillRect(265,155,135,240)
        ctx.fillRect(420,215,135,180)
        ctx.fillRect(575,95,135,300)
        // 左上角文字
        ctx.font = '20px 微软雅黑'
        ctx.fillStyle = '#000'
        ctx.fillText('数据可视化 - ECharts入门案例',30,40)
    </script>

上一篇：netty搭建rpc框架


下一篇：【netty】(1)---BIO NIO AIO演变