Canvas绘制线条(掌握)
2018-07-16 本文已影响0人
佩佩216
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' );
基本的绘制路径（重点）
- canvas坐标系
坐标系
-
设置绘制起点(moveTo)
语法：ctx.moveTo(x, y);
解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置;
参数：x,y 都是相对于 canvas盒子的最左上角。
注意：绘制线段前必须先设置起点，不然绘制无效。 -
绘制直线(lineTo)
语法：ctx.lineTo(x, y);
解释：从x,y的位置绘制一条直线到起点或者上一个线头点。
参数：x,y 线头点坐标。 -
路径开始和闭合
开始路径：ctx.beginPath();
闭合路径：ctx.closePath();
解释：如果复杂路径绘制，必须使用路径开始和结束。
closePath:闭合路径会自动把最后的线头和开始的线头连在一起。
beginPath: 核心的作用是将 不同绘制的形状进行隔离， 每次执行此方法，表示重新绘制一个路径,跟之前的绘制的路径可以进行分开样式设置和管理。 -
描边(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(); //描边路径
