我发现看自己的博客比查文档还快,所以就在这里写一下 canvas 基础的API。以及我自己封装的画笔,github地址
基础API
画线
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(20, 20); //画笔移动到这个坐标开始画
ctx.lineTo(200, 100); //画笔画到哪里
ctx.strokeStyle = 'red';
ctx.lineWidth = 10; //线粗细
ctx.lineCap = 'round'; //线两端圆角,默认直角
ctx.stroke(); //画路径(线)
效果
画矩形
带描边的
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 100, 60) //fillRect(起始x坐标,起始y坐标,宽,高)
ctx.strokeStyle = 'blue';
ctx.lineWidth = 10; //描边粗细
ctx.lineJoin = 'round'; //圆角,默认直角
ctx.strokeRect(15, 15, 110, 70) //受路径画法的影响,这里参数稍有不同
效果
画多边形
举例三角形
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(20, 20);
ctx.lineTo(200, 100);
ctx.lineTo(60, 100);
ctx.closePath(); //关闭路径
// ctx.stroke(); //画路径
ctx.fill(); //填充
效果
beginPath()
绘画时可以使用 beginPath() 开启一个新的状态,类似作用域。举例:
ctx.lineWidth = 10;
ctx.strokeStyle = 'red';
ctx.moveTo(100, 50);
ctx.lineTo(300, 50);
ctx.stroke();
ctx.strokeStyle = 'green';
ctx.moveTo(100, 100);
ctx.line