canvas入门，一篇博文带你学会用代码绘画，直击实战案例！_贪吃?大魔王

网络 02-07 3313

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

canvas的简单使用：

获取canvas元素

var canvas = document.querySelector('canvas')

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

工具箱中包含了很多工具：直线工具、弧形工具、文本工具、矩形工具… 我们需要依赖这些工具进行绘画 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()

步骤：

获取canvas元素 var canvas = document.querySelector('canvas') 获取工具箱 var ctx = canvas.getContext('2d') 设置线条的宽度 ctx.lineWidth = 10 把画笔放到画布上 ctx.moveTo(100,100) 使用直线工具移动画笔 ctx.lineTo(200,100) 描边 ctx.stroke() 重新开启一个路径 - 工具箱.beginPath() ctx.beginPath() 设置线条的宽度20 ctx.lineWidth = 20 再画一条线 ctx.moveTo(100,200) ctx.lineTo(200,200) ctx.stroke()

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

效果：

画三角形：

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

闭合：

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

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

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

依靠填充的方式闭合：

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

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

描边会把填充的内容扩大

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

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

步骤：

获取canvas元素 var canvas = document.querySelector('canvas') 获取工具箱 var ctx = canvas.getContext('2d') 设置一个线条宽度 ctx.lineWidth = 20 画三角形需要三条线 ctx.beginPath() ctx.moveTo(100,100) ctx.lineTo(200,100) 第二条 ctx.lineTo(200,200) 填充 ctx.fill()

效果：

画填充回形：

需求：

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

获取画布的宽度和高度：

ctx.canvas.width ctx.canvas.height

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

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

顺时针+1，逆时针-1

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

步骤：

获取canvas元素，获取工具箱 var canvas = document.querySelector('canvas') var ctx = canvas.getContext('2d') 画大正方形 ctx.beginPath() ctx.moveTo(50,50) ctx.lineTo(250,50) ctx.lineTo(250,250) ctx.lineTo(50,250) ctx.lineTo(50,50) 画小正方形 ctx.moveTo(100,100) ctx.lineTo(100,200) ctx.lineTo(200,200) ctx.lineTo(200,100) ctx.lineTo(100,100) 描边，填充 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*奇数个数组中有偶数个元素，那重复的个数就是偶数个步骤：

获取canvas元素，获取工具箱 var canvas = document.querySelector('canvas') // 获取工具箱 var ctx = canvas.getContext('2d') 设置虚线方案 ctx.setLineDash([5,10,15]) 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

面向对象封装折线图：

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) this.ctx.lineTo(data.x-this.length/2,data.y-this.length/2) this.ctx.closePath() this.ctx.stroke() this.ctx.fill() } // 转换数据的方法 convert(){ // 将坐标轴的数据转成画布的数据 // 遍历数据 this.canvasData = this.data.map(point=>{ return { x:point.x+this.space, y:this.canvasHeight - this.space - point.y } }) } // 创建y轴 createAxisY(){ this.ctx.beginPath() // 将画笔放到原点 this.ctx.moveTo(this.originX,this.originY) // 画线 this.ctx.lineTo(this.originX,this.space) // 画箭头 this.ctx.lineTo(this.originX-this.length/2,this.space + this.length) this.ctx.lineTo(this.originX+this.length/2,this.space + this.length) this.ctx.lineTo(this.originX,this.space) this.ctx.closePath() this.ctx.stroke() this.ctx.fill() } // 获取原点的方法 getOrigin(){ this.originX = this.space; this.originY = this.canvasHeight - this.space } // 定义创建x坐标轴的方法 createAxisX(){ this.ctx.beginPath() // 将画笔放到原点 this.ctx.moveTo(this.originX,this.originY) // 画线 this.ctx.lineTo(this.canvasWidth - this.space,this.originY) // 画箭头 this.ctx.lineTo(this.canvasWidth-this.space-this.length,this.originY-this.length/2) this.ctx.lineTo(this.canvasWidth-this.space-this.length,this.originY+this.length/2) this.ctx.lineTo(this.canvasWidth - this.space,this.originY) this.ctx.closePath() this.ctx.stroke() this.ctx.fill() } } var lc = new LineChart('linechart',[ { x:0, y:0 }, { x:100, y:100 }, { x:200, y:120 }, { x:300, y:220 }, { x:400, y:150 }, ]) console.log(lc); lc.init() 画矩形：

矩形需要设置起点和矩形的宽和高：

ctx.rect(起点x,起点y,宽,高)

然后进行描边或填充。

直接进行绘制矩形并描边：

ctx.strokeRect(起点x,起点y,宽,高)

直接绘制矩形并填充：

ctx.fillRect(起点x,起点y,宽,高)

当进行多个矩形填充不同颜色的时候，不需要结束路径，因为绘制矩形没有开启新的路径，绘制形状互相是独立的。

清除矩形：

清除矩形是将指定范围内的东西都清除掉

ctx.clearRect(起点x,起点y,宽,高)

步骤：

var canvas = document.querySelector('canvas') var ctx = canvas.getContext('2d') 矩形 - ctx.rect(矩形的起始坐标的x,矩形的起始坐标的y,矩形x轴长度,矩形y轴的长度) ctx.rect(50, 50, 200, 100) 描边 ctx.strokeStyle = 'red'; 设置填充颜色 ctx.fillStyle = 'yellowgreen'; 填充 ctx.fill()

清除矩形：

// 快速创建描边矩形 - 不用描边了 ctx.strokeRect(50, 50, 200, 100) // 快速创建填充矩形 - 不用填充了 ctx.fillRect(50, 200, 200, 100) // 清除矩形 ctx.clearRect(25, 100, 300, 150)

渐变：

设置颜色的时候是可以设置渐变的。渐变跟形状无关，在画布中确定好渐变的区域和颜色之后，在这个区域内的图形，填充或描边时可以将颜色设置成渐变。

设置渐变方案：

ctx.createLinearGradient(开始x,开始y,结束x,结束y) // 返回渐变方案

通过设置的初始值和结束值可以确定渐变的方向。

设置渐变颜色：

渐变方案.addColorStop(数字,颜色) // 数字： /* 取值范围是0~1，0代表开始，1代表结束 */

渐变方案可以直接赋值给填充或描边颜色的，例：

// 设置渐变方案 var linearGradient = ctx.createLinearGradient(100,100,500,100); // 添加渐变颜色 linearGradient.addColorStop(0,'red'); linearGradient.addColorStop(0.5,'green'); linearGradient.addColorStop(1,'blue'); // 将渐变方案设置给填充颜色 ctx.fillStyle = linearGradient; // 绘制矩形 ctx.fillRect(150,150,500,200)

步骤：

获取节点工具箱 var canvas = document.querySelector('canvas') var ctx = canvas.getContext('2d') 设置一个渐变方案 - 设置给画布的参数1：渐变开始的坐标里面的 x坐标参数2：渐变开始的坐标里面的 y坐标参数3：渐变结束的坐标里面的 x坐标参数4：渐变结束的坐标里面的 y坐标有了这4个参数，明白了渐变的方向 - 返回一个渐变方案 var linearGradient = ctx.createLinearGradient(0,0,600,0) 给渐变方案设置渐变的颜色参数1：数字 - 取值范围 0~1 0表示开始 1表示结束 linearGradient.addColorStop(0,'red'); linearGradient.addColorStop(1,'green') 渐变方案可以当做是一个颜色直接赋值给填充或描边的颜色值 ctx.strokeStyle = linearGradient ctx.lineWidth = 10 ctx.strokeRect(50,200,500,50)

效果：

画弧线：

画弧线是画一个路径，后面需要填充或描边。

ctx.arc(圆心x,圆心y,半径,开始弧度,结束弧度)

弧度：当圆形上的边跟半径相等的时候就是一个弧长，弧度其实就是弧长的个数。

我们通常描述的时候，会使用角度来描述弧形，很少描述弧度，但是计算机在计算的时候使用弧度的时候比较多。

弧度和角度的换算：

周长 = π * 半径 * 2 一周长是360度，1弧长是半径，所以： 1弧长对应的角度 = 180 / π 新角度/计算出来的角度 = 新弧长 / 1弧长新弧长 = 1弧长 * 新角度 / 计算出来的角度新弧长 = r * 60 * π / 180 弧度 = 角度 * π / 180

横向x轴向右的角度是0度，顺时针是正角度，所以画一个0度到60度的弧形：

// 圆心是100*100，半径是100 ctx.arc(100,100,100,0,60 * Math.PI/180) ctx.stroke() ctx.fill()

将这个弧形和半径进行填充就能得到一个扇形。

ctx.moveTo(100,100) ctx.arc(100,100,100,0,Math.PI/3) ctx.stroke() ctx.fill()

等分圆形： var width = ctx.canvas.width; var height = ctx.canvas.height var pointX = width / 2; var pointY = height / 2; var r = 100; var num = 4; var startArc = 0; for(var i=0;i<num;i++){ ctx.beginPath() ctx.moveTo(pointX,pointY) ctx.fillStyle = getColor() ctx.arc(pointX,pointY,r,startArc,(i+1)*360/num*Math.PI/180) ctx.stroke() ctx.fill() startArc = (i+1)*360/num*Math.PI/180 } function getColor(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return `rgb(${r},${g},${b})` }

画饼图：

已知数据：

15 ~ 20 岁, 22 人 20 ~ 25 岁, 18 人 25 ~ 30 岁, 31 人 30 ~ 35 岁, 17 人 35 ~ 40 岁, 123 人

将数据抽象出来成一个数组：

[22,18,31,17,123]

每个数据对应的弧长：

角度：(数据 / 总和) * 360 弧度：角度 * Math.PI / 180

代码：

画文字： ctx.strokeText(文本,文字开始x,文字开始y) // 描边 ctx.fillText(文本,文字开始x,文字开始y) // 填充文字

文字大小：

ctx.font = '字号大小字体' // 字号大小就是数字px

上下对齐方式：

取值：默认是baseline bottom：底线对齐 top：顶线对齐 middle：中线对齐

ctx.textBaseLine = 值;

左右对齐方式：取值：基于我们设置的文字坐标来对齐的 left - 默认值，左对齐 right - 右对齐

ctx.textAlign = 值;

获取文本内容的总宽度：

ctx.measureText(文本内容) 获取到一个对象，其中包含width属性就是文字的宽度

实战：

画一个完整的统计饼图

源码：

官网地址：https://echarts.apache.org/zh/index.html

1、下载echarts.min.js文件

具体方法在官网有很多种。

2、引入ECharts

3、绘制一个简单的图表，在官网挑选自己喜欢的图表

这里挑选了一个北京公交线路图

复制源码 Ctrl +c 和 Ctrl +v

效果：

制作自己需要的扇形图，柱形统计图，气泡图等

制作一个天气饼状图

修改响应的数据

可添加响应的配置项，修改等等

更多详情可查看手册。

觉得博主总结的不错的，可以收藏支持一波~

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签： #canvas入门 #一篇博文带你学会用代码绘画 #直击实战案例 #画布默认大小是300150

canvas入门，一篇博文带你学会用代码绘画，直击实战案例！_贪吃?大魔王

canvas入门，一篇博文带你学会用代码绘画，直击实战案例！_贪吃?大魔王

H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)_h5 canvas入门_普通网友