canvas

一．Canvas的基本介绍

１．什么是Canvas

定义：是HTML5提供的一种新标签, ie9才开始支持的，Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

２．Canvas主要应用的领域

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

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

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

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

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

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

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

３．Canvas绘制线条

０１Canvas标签语法和属性

canvas：画布油布的意思 英 ['kænvəs] 美 ['kænvəs]

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

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

width和hegiht：默认300*150像素

注意：

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

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

可以给canvas画布设置背景色

０２　浏览器不兼容处理

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

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

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

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

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

    你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本 

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

４．Canvas绘图上下文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' );

５．基本的绘制路径

５．１Ｃanvas绘制的基本说明

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

绘制起点：ctx.moveTo(x, y); //x,y 都是相对于 canvas盒子的最左上角。

绘制终点：ctx.lineTo(x, y); //从x,y的位置绘制一条直线到起点或者上一个线头点。

开始路径：ctx.beginPath();作用：将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽.

闭合路径：ctx.closePath();作用：闭合路径会自动把最后的线头和开始的线头连在一起。

描边：ctx.stroke();

５．２Canvas绘制的基本步骤：

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

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

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

第四步：绘制(点、线、面、图片...) =>ctx.lineTo(x, y)

第五步：闭合路径 =>ctx.closePath();

第六步：绘制描边 =>ctx.stroke();

二.Canvas绘制的基本应用

2.1 Canvas绘制表格-背景

2.2 Canvas绘制表格完成

2.3Canvas绘制画板

2.4Canvas绘制矩形

2.5Canvas绘制弧线

2.6非零正交原则

2.7Canvas绘制五环

2.8Canvas绘制饼状图

2.9Canvas绘制文字

2.10Canvas绘制饼状图以及绘制文字

2.11Canvas绘制图片

2.12Canvas绘制帧动画