canvas的概念

是html5的一个新标签
是一个矩形画布，可以用js在上面绘画

canvas的应用

可视化数据：最常用到的百度的echart
游戏

canvas的属性

context 上下文、绘制环境

上下文：是所有的绘制操作 api 的入口或者集合。
Canvas 自身无法绘制任何内容。Canvas 的绘图是使用 JavaScript 操作的。
Context 对象就是 JavaScript 操作 Canvas 的接口。使用[CanvasElement].getContext(‘2d’)来获取 2D 绘图上下文。

var canvas = document.getElementById('canvasId'); // 获得画布
var ctx = canvas.getContext('2d');

基本的绘制路径

canvas 坐标系

从最左上角 0,0 开始。x 向右增大，y 向下增大

设置起点(moveTo)

语法：ctx.moveTo(x, y);
解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置
参数：x,y 都是相对于 canvas盒子的最左上角。

绘制直线(lineTo)

语法：ctx.lineTo(x, y);
解释：从x,y的位置绘制一条直线到起点或者上一个线头点。
参数：x,y 线头点坐标。

路径开始和闭合

开始路径：ctx.beginPath();
闭合路径：ctx.closePath();
解释：如果是绘制不同状态的线段或者形状，必须使用开始新路径的方法把不同的绘制操作隔开。闭合路径会自动把最后的线头和开始的线头连在一起。
beginPath: 核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

描边(stroke)

语法：ctx.stroke();
解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke * stroke: 画

填充(fill)

语法：ctx.fill();
解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。

边矩形和填充矩形

语法： ctx.strokeRect(x, y, width, height);
绘制完路径后立即进行stroke绘制
语法：ctx.fillRect(x, y, width, height);
执行完成后。立即对当前矩形进行fill填充。

除矩形(clearRect)

语法：ctx.clearRect(x, y, width, hegiht);
解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

canvas 绘制的基本步骤

1：获得上下文 =>canvasElem.getContext(‘2d’);

2：开始路径规划 =>ctx.beginPath()

3：移动起始点 =>ctx.moveTo(x, y)

4：绘制线(矩形、圆形、图片…) =>ctx.lineTo(x, y)

5：闭合路径 =>ctx.closePath();

6：绘制描边 =>ctx.stroke();

举个栗子：

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

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

canvas.width = 900; // 设置canvas宽高
canvas.height = 600; 
canvas.style.border = '1px solid #000';

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

canvas的基本使用（一）