canvas入门

canvas 绘制基本步骤：

第一步：获得上下文 => canvasElem.getContext(‘2d’);
第二步：开始路径规划 => ctx.beginPath()
第三步：移动到绘制起始点 => ctx.moveTo(x, y)
第四步：绘制曲线(矩形、圆形、图片…) => ctx.lineTo(x, y)
第五步：闭合绘制路径 => ctx.closePath();
第六步：绘制描边 => ctx.stroke();

html 部分：

<canvas id="cavsElem"> 你的浏览器不支持canvas，请升级浏览器 </canvas>

javascript 部分：

//===============基本绘制api====================
//获得画布
var canvas = document.querySelector('#cavsElem');
var ctx = canvas.getContext('2d'); //获得上下文

canvas.width = 900; //设置标签的属性宽高
canvas.height = 600; //千万不要用 canvas.style.height
canvas.style.border = '1px solid #000';

//绘制三角形，以下
ctx.beginPath(); //开始路径
ctx.moveTo(100, 100); //三角形，左顶点
ctx.lineTo(300, 100); //右顶点
ctx.lineTo(300, 300); //底部的点
ctx.closePath(); //结束路径
ctx.stroke(); //描边路径