canvas入门，一篇博文带你学会用代码绘画，直击实战案例！

Posted 2022-12-06 贪吃ღ大魔王

canvas

简单说明

1. canvas是html5的一个标签，代表一个画布，可以在上面进行绘画、动画等操作。画布默认大小是300*150。
2. canvas标签本省只是画布，要实现上面有文字、线条等呈现，需要使用js实现。总之，画布上一切的呈现，都需要使用js来实现。canvas标签本质上就是一张图片，只是一张空白图片。
3. 创建好的画布，要在上面进行绘画，需要使用js，用js操作canvas标签的 - canvas技术
4. canvas标签，需要将画布调整大小的时候，加样式只是能改变视觉效果，真实的画布大小并没有改变，只是将画布的图片等比例放大了而已
5. 调整画布大小，需要设置canvas标签的width属性和height属性
6. canvas标签是一个双标签，在canvas标签中是不能放内容的，放了也没有用，只有当浏览器不支持canvas标签的时候，内部的内容才会显示
7. 画布大小不能使用样式控制，用样式调整的是一个可视区域，其实真实的大小，还是一样的，只是在画布上画内容的话，会等比例放大。调整画布大小，需要在标签上直接添加width和height属性。
8. canvas标签也是可以放文字的，只是当canvas标签不被浏览器支持的时候，会显示，例如ie8。

---

canvas的简单使用：

1. 获取canvas元素

   var canvas = document.querySelector('canvas')
   

2. 获取这个元素的工具箱 - 上下文

工具箱中包含了很多工具：直线工具、弧形工具、文本工具、矩形工具… 我们需要依赖这些工具进行绘画
canvas提供了一个工具箱 - canvas.getContext() - 获取工具箱

语法：

var ctx = canvas.getContext('2d')

canvas现在没有3d的，所有3d效果都是2d模拟出来的 - 要有一个固定的参数 '2d' - 默认返回工具箱

画直线

设置线条的宽度 - 工具箱.lineWidth = 值
值是不需要设置px单位的，默认是px，设置的是一个数字

ctx.lineWidth = 2

先将画笔放到画布上 - 工具箱.moveTo(x轴的坐标，y轴的坐标)

ctx.moveTo(100,100)

通过直线移动画笔 - 选择直线工具，并移动画笔到执行的位置 - 工具箱.lineTo(x轴的坐标,y轴的坐标)

ctx.lineTo(200,100)

默认不显示线，理解成他默认是白色的，需要让他显示出来
描边 - 工具箱.stroke() - 描边默认使用黑色,默认描边使用1px

ctx.stroke()

但是我们看到的线条，既不是1px的，也不是黑色的？
因为，canvas将线条，拉伸了，其实这个线就是2px的，拉伸以后，颜色就被稀释了，所以看起来没有那么黑
拉伸是因为浏览器不识别0.5的边框，设置2px的线条宽度，就不会被拉伸

所以我们在画布中设置线条的时候，尽量设置双数，不被拉伸，单数会被拉伸

基于这个问题，我们以后在绘图的时候，尽量将像素设置为双数。

---

使用

画多条线：

可以在一个画布中画多条线，但是直接将画笔以线的形式移动到一个位置的时候，是从前面的结束位置，到新的位置画了一条新的线，所以我们需要重新将画笔移动到第二条线的开始位置，然后再以线的形式移动画笔，再次描边。

但是在描第二条边的时候，会再次描第一条边，所以多次描边，前面的线的颜色会越来越深。

我们通常在绘制的时候，会等所有图案绘制结束之后，描一次边，不会描多次。

如果要设置描边的颜色，可以在描边之前设置描边的颜色：

ctx.strockStyle = '颜色值';

问题：如何给多条线设置不同的宽度和颜色？因为我们在最后描边的时候，发现所有线都是同一个颜色，哪怕给每条线都进行描边，也是一样的结果，说明每条线之间有很大的关联，canvas默认会从上下文上继承颜色和宽度。

我们需要在每次开始绘制的时候，告诉canvas下次的绘制是重新设置，跟上面的没有关系：

ctx.beginPath()

步骤：

1. 获取canvas元素

var canvas = document.querySelector('canvas')

2. 获取工具箱

var ctx = canvas.getContext('2d')

3. 设置线条的宽度

ctx.lineWidth = 10

4. 把画笔放到画布上

ctx.moveTo(100,100)

5. 使用直线工具移动画笔

ctx.lineTo(200,100)

6. 描边

ctx.stroke()

7. 重新开启一个路径 - 工具箱.beginPath()

ctx.beginPath()

8. 设置线条的宽度20

ctx.lineWidth = 20

9. 再画一条线

ctx.moveTo(100,200)
ctx.lineTo(200,200)
ctx.stroke()

此时，上面的线比下面的线颜色要深，因为上面的线被描了两次边

效果：

画三角形：

三条线回到起点，就是三角形，但是线的结尾和开头部分，进行闭合的时候，其实是缺一个角的。

闭合：

1. 手动闭合，再次画一次开始的线段

2. 自动闭合 - 需要在描边之前闭合

   ctx.closePath() // 会自动将开始和结束的边进行闭合
   

3. 依靠填充的方式闭合：

   ctx.fill() // 填充颜色默认是黑色
   

描边和填充可以一起使用，也可以单独使用，但是都有各自的规则：

描边会把填充的内容扩大

描边的颜色默认是黑色，使用ctx.strokeStyle来设置描边颜色

填充的颜色默认是黑色，使用ctx.fillStyle来设置填充颜色

步骤：

1. 获取canvas元素

var canvas = document.querySelector('canvas')

2. 获取工具箱

var ctx = canvas.getContext('2d')

3. 设置一个线条宽度

ctx.lineWidth = 20

4. 画三角形需要三条线

ctx.beginPath()
ctx.moveTo(100,100)
ctx.lineTo(200,100)

5. 第二条

ctx.lineTo(200,200)

6. 填充

ctx.fill()

效果：

画填充回形：

需求：

大正方形：200 * 200；小正方形：100 * 100；出现在画布的最中心；线宽2；

获取画布的宽度和高度：

ctx.canvas.width
ctx.canvas.height

通过线段描边，得到两个正方形，填充规则 - 非零填充规则：

在任何一个填充的区域，向外(到外围canvas的区域)拉一条线，数数经过了几个顺时针和逆时针进行计算：

顺时针+1，逆时针-1

最后得到的数字不是0，就填充；是0，就不填充

步骤：

1. 获取canvas元素，获取工具箱

var canvas = document.querySelector('canvas')

var ctx = canvas.getContext('2d')

2. 画大正方形

ctx.beginPath()
ctx.moveTo(50,50)
ctx.lineTo(250,50)
ctx.lineTo(250,250)
ctx.lineTo(50,250)
ctx.lineTo(50,50)

3. 画小正方形

ctx.moveTo(100,100)
ctx.lineTo(100,200)
ctx.lineTo(200,200)
ctx.lineTo(200,100)
ctx.lineTo(100,100)

4. 描边，填充

ctx.stroke()
 ctx.fill()

效果：

canvas进行填充的时候，有一个非零填充规则：

我们要填充的时候，可以给每一个要填充的区域开始向外拉一条线 - 计算
这条线一直到画布的最大范围
计算这条线经过的形状的边
每经过一个边，就计算这个边画的时候是使用顺时针画的，还是逆时针画的
最初始拿0计算，经过顺时针+1，经过逆时针的边-1
最后计算得出的结果是0或者不是0
如果不是0的区域就填充，如果是0的区域就不填充

线段两端的样式：

butt - 默认是没有 - 不会超出线段区域
round - 原型，会超出线段区域
square - 矩形形状，会超出线段区域

ctx.lineCap = 值;

// 获取canvas元素
    var canvas = document.querySelector('canvas')
    // 获取工具箱
    var ctx = canvas.getContext('2d')

    ctx.lineWidth = 20
    ctx.beginPath()
    ctx.moveTo(100, 50)
    ctx.lineTo(200, 50)

    // 线两端样式 - 工具箱.lineCap = 值
    // ctx.lineCap = 'butt'; // 默认值，表示没有帽子
    ctx.lineCap = 'round'; // 圆形的帽子，会加长线
    ctx.lineCap = 'square'; // 圆形的帽子，会加长线
    ctx.stroke()

圆形：

默认：

线段和线段交接处的样式：

miter - 默认
round - 圆弧形状
bevel - 平角形状

ctx.lineJoin = 值;

// 获取canvas元素
var canvas = document.querySelector('canvas')
// 获取工具箱
var ctx = canvas.getContext('2d')

ctx.lineWidth = 20
ctx.moveTo(50,30)
ctx.lineTo(150,100)
ctx.lineTo(250,30)

// ctx.lineJoin - 设置两条线连接的地方的样式
// ctx.lineJoin = 'miter' // 默认是两条线的角度的连接点
// ctx.lineJoin = 'round' // 两条线在连接的时候使用圆形连接
ctx.lineJoin = 'bevel' // 使用平角进行连接

ctx.stroke()

默认是两条线的角度的连接点：

两条线在连接的时候使用圆形连接：

使用平角进行连接：

画虚线：

需要在绘制线条之前，设置线条的样式为虚线：

数组 - 虚线方案，在数组中描述线条和空白的长度，然后不停的重复
两个值，第一个值是线条长度，第二个值是空白长度 - 重复
三个值，第一个值是线条长度，第二个值空白长度，第三个值是线条的长度；接下来是第二个值的空白长度，第二个值是线条的长度，第三个值是空白的长度 - 重复
四个值，第一个值是线条长度，第二个值是空白长度，第三个值是线条的长度，第四个值是空白长度 - 重复

ctx.setLineDash(参数);

获取虚线的方案：

ctx.getLineDash()
// 获取到的是一个数组，数组中记录了一段不重复的虚线方案

总结：
数组中有奇数个元素，那重复的个数就是 2*奇数个
数组中有偶数个元素，那重复的个数就是偶数个
步骤：

1. 获取canvas元素，获取工具箱

var canvas = document.querySelector('canvas')
// 获取工具箱
var ctx = canvas.getContext('2d')

2. 设置虚线方案

ctx.setLineDash([5,10,15])

3. 4个值，实线、空白、实线、空白 - 重复

ctx.lineWidth = 10
ctx.moveTo(100,100)
ctx.lineTo(500,100)

ctx.stroke()

效果：

利用循环画纯色渐变的线条：

ctx.lineWidth = 10
for(var i=0;i<256;i++)
    ctx.beginPath()
    ctx.moveTo(100+i,100)
    ctx.lineTo(100+i+1,100)
    ctx.strokeStyle = `rgb(255,$255-i,$255-i)`
    ctx.closePath()
    ctx.stroke()

画折线图

html

<style>
    canvas
        border:1px solid #000;
    
</style>
<canvas width=600 height=300></canvas>

js

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
// 画点的函数
function setPoint(pointData)
    ctx.beginPath()
    ctx.moveTo(pointData.x - 5,pointData.y - 5)
    ctx.lineTo(pointData.x - 5,pointData.y + 5)
    ctx.lineTo(pointData.x + 5,pointData.y + 5)
    ctx.lineTo(pointData.x + 5,pointData.y - 5)
    ctx.stroke()
    ctx.fill()

// 画多个点的函数
function setPoints(pointsData)
    pointsData.forEach(v=>
        setPoint(v)
    )

var pointsData = [
    
        x:20,
        y:280
    ,
    
        x:120,
        y:180
    ,
    
        x:220,
        y:160
    ,
    
        x:320,
        y:50
    ,
    
        x:420,
        y:105
    
]
setPoints(pointsData)
// 画坐标轴
var space = 20;
var width = ctx.canvas.width
var height = ctx.canvas.height
// x轴
function setAxiosX()
    var pointX = space;
    var pointY = height - space;
    var endX = space;
    var endY = space;
    ctx.beginPath()
    ctx.moveTo(pointX,pointY)
    ctx.lineTo(endX,endY)
    // 画箭头
    ctx.lineTo(endX-5,endY+10)
    ctx.lineTo(endX+5,endY+10)
    ctx.lineTo(endX,endY)
    ctx.stroke()
    ctx.fill()

setAxiosX()
// y轴
function setAxiosY()
    var pointX = space;
    var pointY = height - space;
    var endX = width-space;
    var endY = height - space;
    ctx.beginPath()
    ctx.moveTo(pointX,pointY)
    ctx.lineTo(endX,endY)
    // 画箭头
    ctx.lineTo(endX-10,endY-5)
    ctx.lineTo(endX-10,endY+5)
    ctx.lineTo(endX,endY)
    ctx.stroke()
    ctx.fill()

setAxiosY()

// 点连线
function connectPoints(pointsData)
    for(var i=0;i<pointsData.length-1;i++)
        ctx.moveTo(pointsData[i].x,pointsData[i].y)
        ctx.lineTo(pointsData[i+1].x,pointsData[i+1].y)
        ctx.stroke()
    

connectPoints(pointsData)

面向对象封装折线图：

class LineChart
    constructor(classname,data)
        // 画布标签获取到
        this.canvas = document.querySelector('.'+classname)
        // 工具箱
        this.ctx = this.canvas.getContext('2d')
        // 定义画布大小
        this.canvasWidth = this.ctx.canvas.width
        this.canvasHeight = this.ctx.canvas.height
        // 定义坐标轴到画布边缘的间隙
        this.space = 20
        // 定义原点
        this.originX = 0
        this.originY = 0
        // 定义箭头三角形的高 和 点 的长度
        this.length = 10
        // 将数据绑定成类的属性
        this.data = data
        // 定义画布中的数据
        this.canvasData = null;
    
    // 定义一个初始化方法
    init()
        // 获取原点
        this.getOrigin()
        // 创建坐标轴 - x、y
        this.createAxisX()
        this.createAxisY()
        // 转换数据
        this.convert(this.data)
        // 描每个点
        // this.setPoint(data)
        // 描所有点
        this.setPoints(this.canvasData)
        // 连线
        this.connectLine(this.canvasData)
    
    connectLine(data)
        for(let i=0;i<data.length-1;i++)
            this.ctx.beginPath()
            // 放画笔
            this.ctx.moveTo(data[i].x,data[i].y)
            // 画线
            this.ctx.lineTo(data[i+1].x,data[i+1].y)
            this.ctx.closePath()
            this.ctx.stroke()
        
    
    // 描所有点的方法
    setPoints(data)
        data.forEach(point=>
            this.setPoint(point)
        )
    
    // 描一个点的方法
    setPoint(data)
        this.ctx.beginPath()
        // 放画笔位置
        this.ctx.moveTo(data.x-this.length/2,data.y-this.length/2)
        // 画线
        this.ctx.lineTo(data.x+this.length/2,data.y-this.length/2)
        this.ctx.lineTo(data.x+this.length/2,data.y+this.length/2)
        this.ctx.lineTo(data.x-this.length/2,data.y+this.length/2)
        以上是关于canvas入门，一篇博文带你学会用代码绘画，直击实战案例！的主要内容，如果未能解决你的问题，请参考以下文章
 
 一篇博文带你0基础 Html和css入门
 一篇博文带你 jQuery入门，万字肝爆！ 建议收藏~
 一篇博文：带你30分钟入门ajax入门，直击实战操作
 一篇博文：带你30分钟入门ajax入门，直击实战操作
 一篇博文：带你30分钟入门ajax入门，直击实战操作
 Python二次转码不用愁，一篇博文带你快速搞定！