神奇且强大的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实现。
８ 版本支持
最新标准：http://www.w3.org/TR/2dcontext/
稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
３．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才支持，其他都支持
-
如果浏览器不兼容，最好进行友好提示
ｅｇ： 如果浏览器不兼容，可以使用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绘制表格-背景
eg:
2.2 Canvas绘制表格完成
eg:
2.3Canvas绘制画板
eg:
2.7Canvas绘制五环
eg:
2.8Canvas绘制饼状图
eg:
2.9Canvas绘制文字
01.绘制上下文的文字属性
font 设置或返回文本内容的当前字体属性
-
font 属性使用的语法与 CSS font 属性相同。
eg: ctx.font = "18px '微软雅黑'"; textAlign 设置或返回文本内容的当前对齐方式
start : 默认。文本在指定的位置开始。
end : 文本在指定的位置结束。
center: 文本的中心被放置在指定的位置。
left : 文本左对齐。
-
right : 文本右对齐。
eg: ctx.textAlign = 'left'; textBaseline 设置或返回在绘制文本时使用的当前文本基线
alphabetic ： 默认。文本基线是普通的字母基线。
top ： 文本基线是 em 方框的顶端。。
hanging ： 文本基线是悬挂基线。
middle ： 文本基线是 em 方框的正中。
ideographic： 文本基线是em基线。
-
bottom ： 文本基线是 em 方框的底端。
eg: ctx.textBaseline = 'top'; 单词: alphabetic: 字母的；照字母次序的 [,ælfə'bɛtɪk] ideographic：表意的；表意字构成的 英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]
02 上下文绘制文字的方法
ctx.fillText() 在画布上绘制“被填充的”文本
ctx.strokeText() 在画布上绘制文本（无填充）
ctx.measureText() 返回包含指定文本宽度的对象
-
单词：measure 测量；估量；权衡 英 ['meʒə] 美 ['mɛʒɚ]
eg: //综合案例代码： ctx.moveTo( 300, 300 ); ctx.fillStyle = "purple"; //设置填充颜色为紫色 ctx.font = '20px "微软雅黑"'; //设置字体 ctx.textBaseline = "bottom"; //设置字体底线对齐绘制基线 ctx.textAlign = "left"; //设置字体对齐的方式 //ctx.strokeText( "left", 450, 400 ); ctx.fillText( "Top-g", 100, 300 ); //填充文字
03 文字阴影和模糊范围
ctx.shadowColor
-
ctx.shadowBlur
eg: //设置阴影的颜色 ctx.shadowColor = 'orange'; //设置模糊范围 ctx.shadowBlur = 15; ctx.shadowOffsetX = -10; //水平偏移量 ctx.shadowOffsetY = 20; //垂直偏移量
eg:
2.10Canvas绘制饼状图以及绘制文字
eg:
2.11Canvas绘制图片
01 基本的绘制图片的方式
- 语法:context.drawImage(img,x,y);
- 参数说明： x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象
02 在画布上绘制图像,并规定图像的宽度和高度
- 语法:context.drawImage(img,x,y,width,height);
- 参数说明：width 绘制图片的宽度, height：绘制图片的高度
- 如果指定宽高，最好成比例，不然图片会被拉伸
- 等比公式： toH = Height * toW / Width;
- 设置的高度 = 原高度 * 设置的宽度 / 原宽度;
03 图片裁剪 ,并在画布上定位被裁剪的部分
- 语法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
- 参数说明：
- sx,sy 裁剪的左上角坐标，
- swidth：裁剪图片的高度。
- sheight:裁剪的高度
- 其他同上
04 用JavaScript创建img对象
第一种方式:直接添加图片
eg:var img = document.getElementById("imgId");
第二种方式:创建图片对象
eg:
var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后，执行此方法
示意图:
原图片:
eg:ctx.drawImage(img, 100, 100, 300, 216);
截取图片:
eg:
裁剪的位置: sx,sy,swidth,sheight : 50 50 120 120
sx,sy,swidth,sheight 相对于原图片的裁剪区域
放置位置:x,y,width,height : 350, 100, 120, 120
x, y ,width, height 相对于画布的显示区域
ctx.drawImage(img, 50, 50, 120, 120, 450, 100, 120, 120);
图片说明:
eg:
2.12Canvas绘制帧动画
eg: