01Canvas

《版本支持》

最新标准：http://www.w3.org/TR/2dcontext/

稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/

?{s��vh�^d

注意的知识点：

01、

用JavaScript创建img对象

第一种方式：

var img = document.getElementById("imgId");

第二种方式：

var img = new Image();//这个就是img标签的dom对象

img.src = "imgs/arc.gif";

img.alt = "文本信息";

img.onload = function() {

//图片加载完成后，执行此方法

}

2.1.1 canvas标签语法和属性 （重点）

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

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

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

width和hegiht：默认300*150像素

注意：

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

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

可以给canvas画布设置背景色

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

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

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

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

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

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

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

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

2.2.1 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' );

2.3.2 设置绘制起点(moveTo)

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

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

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

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

2.3.3 绘制直线(lineTo)

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

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

* 参数：x,y 线头点坐标。

2.3.4 路径开始和闭合

* 开始路径：ctx.beginPath();

* 闭合路径：ctx.closePath();

* 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。

* beginPath: 核心的作用是将 不同绘制的形状进行隔离，

每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

2.3.5 描边(stroke)

* 语法：ctx.stroke();

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

* stroke: （用笔等）画；轻抚；轻挪；敲击；划尾桨；划掉；（打字时）击打键盘

英 [strəʊk]   美 [strok]

canvas绘制的基本步骤：

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

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

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

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

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

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

html部分：

当前浏览器不支持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();           //描边路径

2.3.6 填充(fill)

* 语法：ctx.fill();

* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。

2.3.7 快速创建矩形rect()方法

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

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

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

* 改造案例：04填充矩形.html

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

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

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

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

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

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

2.3.9清除矩形(clearRect)

* 语法：ctx.clearRect(x, y, width, hegiht);

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

《2.4 绘制圆形（arc)》

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

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

arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk]

counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]

解释：

x,y：圆心坐标。

r：半径大小。

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

eAngel:结束的角度，注意是弧度。π

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;//注意都是弧度

2.5.1 绘制上下文的文字属性 （有印象就行了）

2.5.2 上下文绘制文字方法

* ctx.fillText()      在画布上绘制“被填充的”文本

* ctx.strokeText()    在画布上绘制文本（无填充）

* ctx.measureText()   返回包含指定文本宽度的对象

* 单词：measure 测量；估量；权衡   英 ['meʒə]   美 ['mɛʒɚ]

//综合案例代码：

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 );        //填充文字

《2.6 绘制图片（drawImage）》 （重点）

2.6.1 基本绘制图片的方式

context.drawImage(img,x,y);

参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。

2.6.2 在画布上绘制图像，并规定图像的宽度和高度

context.drawImage(img,x,y,width,height);

参数说明：width 绘制图片的宽度,

height：绘制图片的高度

如果指定宽高，最好成比例，不然图片会被拉伸

等比公式：  toH = Height * toW   /  Width;

设置的高度 = 原高度 * 设置的宽度 / 原宽度;

2.6.3 图片裁剪，并在画布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数说明：

sx,sy 裁剪的左上角坐标，

swidth：裁剪图片的高度。 sheight:裁剪的高度

其他同上

2.6.4 用JavaScript创建img对象

第一种方式：

var img = document.getElementById("imgId");

第二种方式：

var img = new Image();//这个就是 img标签的dom对象

img.src = "imgs/arc.gif";

img.alt = "文本信息";

img.onload = function() {

//图片加载完成后，执行此方法

}