Canvas绘制线条(掌握)

Canvas标签语法和属性（重点）

• canvas：画布，油布的意思。
• 标签名：canvas，双标签，需要闭合。
• 单位：px，可以设置width和height属性，否则忽略单位。
• 注意：
  • 不要用css控制它的宽和高，会导致内部图片被拉伸，
  • 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
  • 可以给canvas画布设置背景颜色

浏览器不兼容处理（重点）

• ie9以上才支持canvas，其他chrome，safari，Opera等都支持；
• 只要浏览器兼容canvas，那么就会支持绝大部分的api（个别最新api除外）
• 移动设备几乎支持Canvas的所有API
• 2d的支持都非常好，3d（webgl）ie11才支持，其它的都支持
• 如果浏览器不兼容，最好进行友好提示,例如：

<canvas id = "canvas">
你的浏览器不支持canvas，请升级浏览器。
浏览器不支持，显示此文本
</canvas>

• 如果浏览器不兼容，可以使用flash等方式进行替换。

canvas绘图上下文context:Canvas的上下文，绘制环境。

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

//获得画布
var canvas  = document.getElementById( 'cavsElem' );
//注意：2d小写，二维， 3d：webgl
var ctx = canvas.getContext( '2d' );

基本的绘制路径（重点）

1. canvas坐标系

坐标系

2. 设置绘制起点(moveTo)
   语法：ctx.moveTo(x, y);
   解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置;
   参数：x,y 都是相对于 canvas盒子的最左上角。
   注意：绘制线段前必须先设置起点，不然绘制无效。

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

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

5. 描边(stroke)
   语法：ctx.stroke();
   解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke;
   canvas绘制的基本步骤：

• 获得上下文 =>canvasElem.getContext('2d');
• 开始路径规划 =>ctx.beginPath();
• 移动起始点 =>ctx.moveTo(x, y);
• 绘制(点、线、面、图片...) =>ctx.lineTo(x, y)
• 闭合路径 =>ctx.closePath();
• 绘制描边 =>ctx.stroke();

html部分：
<canvas id="canvas">
当前浏览器不支持canvas，请升级浏览器版本
</canvas>
javascript部分：
//===============基本绘制api====================
//获得画布
var canvas = document.querySelector('#canvas');
//获得上下文
var ctx = canvas.getContext('2d');
canvas.width = 800;     //设置标签的属性宽高
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();           //描边路径