canvas基础

推荐

如果要用canvas做一些比较复杂的操作，可以使用这个 konvajs 这个库（最近才看到，没用过，7000多星）；如果只是简单学习，下面的内容基本够用。

开始

//标签，指定画布的宽和高
<canvas id="myCanvas" width="200" height="100"></canvas>
//获取对象
var c=document.getElementById("myCanvas");
//获取2d画布
var ctx=c.getContext("2d");

//常用属性
strokeStyle		线条颜色
lineWidth		线条宽度
fillStyle 		填充颜色
lineCap			线帽（线条顶端样式）
lineJoin		两条线相交点的样式
miterLimit 		设置或返回最大斜接长度。
globalAlpha		设置透明度
font            字体样式

绘制线条

直线

<canvas id="myCanvs" width="200px" height="200px" style="border: solid 1px;"></canvas>
<script>
	//获取对象
	let c = document.getElementById('myCanvs')
	//创建画布环境
	let context = c.getContext("2d");
	//绘制线条
	context.strokeStyle = 'blue' //指定线条颜色
	context.moveTo(0, 0) //线条起始位置
	context.lineTo(200, 200) //线条终点位置
	context.stroke() //绘制线条
</script>

多条直线

//创建第一条路径
context.beginPath()   
context.strokeStyle='red'
context.moveTo(0,0)
context.lineTo(100,100)
context.stroke()

//创建第二条路径
context.beginPath() 
context.strokeStyle='blue'
context.moveTo(200,200)
context.lineWidth=5
context.lineTo(100,100)
context.stroke()

备注：当绘制多条直线时（多条直线没有关系）要通过beginPath来创建一条新的路径，否则会在原来的路径上进行绘制

弧线

context.strokeStyle = 'blue'
context.moveTo(0, 0)
//(x1,y1,x2,y2,r)第一个控制点坐标、第二个控制点坐标，弧的半径
context.arcTo(150, 20, 150, 70, 50) 
context.closePath()
context.stroke()

绘制矩形

绘制矩形

let c=document.getElementById('myCanvs')
let context=c.getContext('2d')
//绘制矩形
context.strokeStyle='blue'   //指定线条颜色
context.strokeRect(0,0,100,50)  //（x,y,w,h）起点、宽高

填充矩形

//填充矩形
context.fillStyle = 'yellowgreen' //指定填充颜色
context.fillRect(0, 0, 100, 50) //填充

填充渐变矩形

//设计渐变颜色
let cg = context.createLinearGradient(0, 0, 170, 30) //（x,y,x1,y2）渐变的起始位置与结束位置
cg.addColorStop(0, 'black') //规定渐变对象中的颜色和位置。位置介于0~1之间
cg.addColorStop(0.5, 'yellow')
cg.addColorStop(1, 'blue')
context.fillStyle = cg //指定填充的样式
context.fillRect(50, 50, 100, 50) //填充

绘制圆

绘制圆环

context.strokeStyle='red'
//（x,y,r,startAngle,endAngle,counterclockwise）圆心、半径、起始角度、结束角度。counterclockwise规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针
context.arc(100,100,50,0,2*Math.PI,true)  
context.stroke()

填充圆

context.fillStyle = 'blanchedalmond'
context.arc(100, 100, 50, 0, 2 * Math.PI)
context.fill()

绘制多重圆环

let color = ['blue', 'yellow', 'black', 'green', 'red']
for (var i = 0; i < 5; i++) {
	context.beginPath() //创建一条新的路径
	context.strokeStyle = color[i]
	context.lineWidth = 2
	context.arc(100, 100, 20 * i + 10, 0, 2 * Math.PI)
	context.stroke()
}

多边形

三角形

context.strokeStyle = 'blue'
context.moveTo(0, 0)
context.lineTo(120, 50) //边1
context.lineTo(50, 120) //边2
context.lineTo(0, 0) //边3
context.stroke()

• 绘制三角形的过程始终是一条先，从（0，0）开始到（120，50）；从（120，50）开始到（50，120）；从（50，120）返回（0，0）
• 第三条边的绘制可以使用closePath()替代
• closePath的意思不是结束路径，而是 关闭 路径，它会试图从当前路径的终点连一条路径到起点，让整个路径闭合起来。但是，这并不意味着它之后的路径就是新路径了！
• beginPath和closePath两者之间没有必然的联系

//设置颜色
context.fillStyle="red";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.closePath();
context.stroke();

绘制文字

填充文字

context.fillStyle = 'blue'
context.font = '25px 幼圆'
//（text,x,y）文字内容、绘制的其实位置
context.fillText("技术改变世界！", 20, 20);

轮廓文字

context.strokeStyle = 'blue'
context.font='100px 楷体'
context.strokeText('A', 50, 100)

渐变文字

let cg = context.createLinearGradient(0, 0, 150, 50)
cg.addColorStop(0.1, "red");
cg.addColorStop(0.7, "blue");
cg.addColorStop(1, "green");
context.fillStyle = cg
context.font = "bold 40px Arial"
context.fillText('你好世界！', 0, 50)

其他

绘制图案

var img = new Image();
img.src = "img/on_off.png";
img.onload = function() {
	//创建图案
	var ptn = context.createPattern(img, "repeat");
	context.fillStyle = ptn;
	context.fillRect(0, 0, 300, 100);
}

绘制阴影

//设置阴影
context.shadowOffsetX = 2; //阴影横向偏移距离
context.shadowOffsetY = 5; //阴影纵向便宜距离
context.shadowBlur = 3; //设置阴影的模糊度
context.shadowColor = "rgba(29, 200, 77, 0.5)";
//绘制矩形
context.fillStyle = '#33ccff';
context.fillRect(20, 20, 300, 60);

删除绘图

context.fillStyle="red";
context.fillRect(20,20,200,100);
//清空一块区域
context.clearRect(20,20,20,20);

测量字体宽度

context.fillStyle="blue";
context.font="30px 楷体";
var str="测量文字宽度";
context.fillText(str,50,50);
context.fillStyle="red";
context.font="20px 楷体";
context.fillText(context.measureText(str).width,100,100)