canvas画图练习教程

不同于 SVG，<canvas> 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

一、画矩形：

// 默认画笔的宽度是1px【这是个人理解的】
/* 矩形
* */
// 矩形——实心
ctx.fillRect(10,10,100, 200)
// 矩形——边框
ctx.strokeRect(120,10,100, 200)
// 矩形——边框有宽度【不是画笔本身的宽度】
ctx.fillRect(230,10,100, 200)
ctx.clearRect(255,60,50,100)

二、画线：

/* 线
* */
// 线-直线
ctx.beginPath()
ctx.moveTo(10, 220);
ctx.lineTo(110, 220)
ctx.stroke()
// ctx.fill() /*这里无效，fill虽然会自动闭合路径，但是对于直线是无法闭合的。所以直线调用fill是无效的。无法填充*/
// 线-直角
ctx.beginPath()
ctx.moveTo(120, 220);
ctx.lineTo(220, 220)
ctx.lineTo(220, 320)
ctx.closePath()  // 自动把线连接到路径的起始位置，相当与简写了最后一个ctx.lineTo到起始位置的线。
ctx.stroke()
// 线-直角-填充
ctx.beginPath()
ctx.moveTo(230, 220);
ctx.lineTo(330, 220)
ctx.lineTo(330, 320)
ctx.stroke()
ctx.fill() // 非直线，fill会自动闭合路径，然后填充颜色。

三、圆弧：

/* 圆
*  说明：圆不像线，从一个点开始画，圆是基于数学原理。从圆心开始定位，设定半径来实现的。所以画圆，不需要moveTo函数。
* */
//  圆弧——线
ctx.beginPath()
ctx.arc(100,380,80,0,2)
ctx.stroke()
//  圆弧——填充
ctx.beginPath()
ctx.arc(300,380,80,0,2)
ctx.fill()

四、二次贝塞尔曲线：

/* 二次贝塞尔曲线
* */
ctx.beginPath()
ctx.moveTo(10,580)
ctx.quadraticCurveTo(200,500,280,580)
ctx.stroke()

五、绘制文本：

/* 绘制文本
* */
ctx.font = "42px serif"
ctx.fillText('hello word', 10, 650)

六、绘制图片：

/* 绘制图片
* */
var img = new Image()
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'
ctx.drawImage(img,10,700)

完整代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 默认画笔的宽度是1px【这是个人理解的】
/* 矩形
* */
// 矩形——实心
ctx.fillRect(10,10,100, 200)
// 矩形——边框
ctx.strokeRect(120,10,100, 200)
// 矩形——边框
ctx.fillRect(230,10,100, 200)
ctx.clearRect(255,60,50,100)

/*canvas中除了矩形，其它的现状都是通过路径实现的*/

/* 线
* */
// 线-直线
ctx.beginPath()
ctx.moveTo(10, 220);
ctx.lineTo(110, 220)
ctx.stroke()
// ctx.fill() /*这里无效，fill虽然会自动闭合路径，但是对于直线是无法闭合的。所以直线调用fill是无效的。无法填充*/
// 线-直角
ctx.beginPath()
ctx.moveTo(120, 220);
ctx.lineTo(220, 220)
ctx.lineTo(220, 320)
ctx.closePath()  // 自动把线连接到路径的起始位置，相当与简写了最后一个ctx.lineTo到起始位置的线。
ctx.stroke()
// 线-直角-填充
ctx.beginPath()
ctx.moveTo(230, 220);
ctx.lineTo(330, 220)
ctx.lineTo(330, 320)
ctx.stroke()
ctx.fill() // 非直线，fill会自动闭合路径，然后填充颜色。
/* 圆弧
*  说明：圆不像线，从一个点开始画，圆是基于数学原理。从圆心开始定位，设定半径来实现的。所以画圆，不需要moveTo函数。
* */
//  圆——线
ctx.beginPath()
ctx.arc(100,380,80,0,2)
ctx.stroke()
//  圆——填充
ctx.beginPath()
ctx.arc(300,380,80,0,2)
ctx.fill()
/* 二次贝塞尔曲线
* */
ctx.beginPath()
ctx.moveTo(10,580)
ctx.quadraticCurveTo(200,500,280,580)
ctx.stroke()
// //////////////////////////////////////////
/* 绘制文本
* */
ctx.font = "42px serif"
ctx.fillText('hello word', 10, 650)
/* 绘制图片
* */
var img = new Image()
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'
ctx.drawImage(img,10,700)

总结：