一、canvas简介

1.1什么是canvas？

  是HTML5提供的一种新标签，ie9才开始支持的

  <canvas></canvas>

  英 [‘k?nv?s] 美 [‘k?nv?s] 帆布 画布

  canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。

  canvas标签使用JavaScript在网页上绘制图像，本身不具备绘图功能。

  canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1.2canvas主要应用的领域

  1可视化数据：各类统计图表，比如：百度的echart

  2场景秀：用canvas实现动态的广告效果能够非常融洽的跨平台运行。如：手机中的微产品。在移动端兼容性很好

  3游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas成为HTML5小游戏开发首选。现阶段h5做游戏，营业方式不是很明确。

  4其他可嵌入网站的内容（多用于活动页面、特效）：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

  5趋势=>模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境，如移动端各种类型手机。

  6趋势=>远程计算机控制：canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。

  7趋势=>图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。

  二、canvas绘制线条

2.1canvas标签语法和属性

  canvas：画布油布的意思

  标签名：canvas，双标签，需要闭合

  单位：px，可以设置width和height属性，否则忽略单位。

  width和height：默认300*150像素

  注意：

  不要用CSS控制它的宽和高，会导致内部图片被拉伸；

  重新设置canvas标签的宽高属性会让画布擦除所有的内容；

  可以给canvas画布设置背景色。

2.2浏览器不兼容处理

  ie9以上才支持canvas，其他chrome、Safari、Opera都支持

  只要浏览器兼容canvas，那么就会支持绝大部分API（个别最新API除外）

  移动设备几乎支持canvas的所有API

  2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持

  如果浏览器不兼容，最好进行友好提示，例如：

  <canvas id="canvas">

  你的浏览器不支持canvas，请升级浏览器。

  </canvas>

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

2.3canvas绘图上下文context

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‘);

三 基本的绘制路径

3.1canvas坐标系

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

3.2 设置绘制起点（moveTo）

  语法：ctx.moveTo(x,y);

  解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置

  参数：x，y都是相对于canvas盒子的最左上角

  注意：绘制线段前必须先设置起点，不然绘制无效

3.3绘制直线（lineTo）

  语法：ctx.lineTo(x,y);

  解释：从x，y的位置绘制一条直线到起点或者上一个线头点

  参数：x，y线头点坐标

3.4路径开始和闭合

  开始路径：ctx.beginPath();

  闭合路径：ctx.closePath();

  解释：如果复杂路径绘制，必须使用路径开始和结束

  closePath：闭合路径会自动把最后的线头和开始的线头连在一起

  beginPath：核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径，跟之前的绘制的路径可以进行分开样式设置和管理

3.5描边（stroke）

  语法：ctx.stroke();

  解释：根据路径绘制线。路径知识草稿，真正绘制线必须执行stroke

  stroke：（用笔等）画；轻抚；轻挪；敲击；划尾浆；划掉；（打字时）击打键盘 英 [str??k] 美 [strok]

  canvas绘制的基本步骤：

第一步：获得上下文=>canvasElem.getContext(‘2d‘);

第二步：开始路径规划=>ctx.beginPath()

第三步：移动起始点=>ctr.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();           //描边路径

四、canvas绘制矩形

1快速创建矩形rect（）方法

  语法：ctx.rect(x,y,width,height);

  解释:x,y是矩形左上角坐标，width和height都是以像素计算

  rect方法只是规划了矩形的路径，并没有填充和描边。

  rect：abbr.矩形（rectangular）；收据（receipt）

2快速创建描边矩形和填充矩形

  语法：ctx.strokeRect(x,y,width,height);

  参数跟ctx.rect相同，注意此方法绘制完路径后立即进行stroke绘制

  语法：ctx.fillRect(x,y,width,height);

  参数跟ctx.rect相同，此方法执行完成后。立即对当前矩形进行fill填充

3清除矩形（clearRect）

  语法：ctx.rect(x,y,width,height);

  解释：清除某个矩形内的绘制的内容，相当于橡皮擦

五、canvas绘制

 绘制圆形（arc）

 概述：arc()方法创建弧/曲线（用于创建圆或部分圆）

 语法：ctx.arc()（x,y,sAngle,eAngle,counterclockwise）;

 arc:弧（度）弧形物；天穹

 counter 反击，还击；反向移动，对着干；反驳。

 解释：

 x，y:圆心坐标

 r：半径大小

 sAngle：绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。

 eAngle：结束的角度，注意是弧度。

 counterclockwise：是否是逆时针。true是逆时针，false：顺时针（默认）

 弧度和角度的转换公式：rad = deg*Math.PI/180;

 在Math提供的方法中sin、cos等都是用的弧度

 三角函数的补充

Math.sin(弧度)//夹角对面的边和斜边的比值

Math.cos（弧度）//夹角侧边与斜边的比值

圆形上面的点的坐标的计算公式

x = x0 + Math.cos(rad)*R;//x0和y0是圆心点坐标

y = y0 + Math.sin(rad)*R;//注意都是弧度

神奇且强大的canvas