标签：canvas const 基础 ctx stroke context 绘制

一、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Π，反向则为负数。

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

 举例

<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 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>

 

 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 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>

标签：canvas,const,基础,ctx,stroke,context,绘制
来源： https://blog.csdn.net/qq_48113035/article/details/122777209

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。