标签：环境   矩形区域   fill   圆形   组件   css3   banner   mac os   top   

一、 <canvas>简介(了解)

1. 什么是canvas:

是HTML5提供的一种新标签

<canvas></canvas>

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

• Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。
• canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
• HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等，但有了canvas Web页面可以可以丰富多彩。
• Canvas标签被很多的工程师认为是HTML5最伟大的改进之一，因为它可以让我们在不使用图片的情况下实现网页的图形设计。
• <canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
• Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
• 我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。
• <canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。

2. <canvas>的历史

3. canvas主要应用的领域

1. 游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。 
   25 超棒的 HTML5 Canvas 游戏
2. 可视化数据.数据图表话，比如:百度的echart
3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
4. 未来=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
5. 未来=> 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
6. 未来=> 图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。
7. 其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
8. 完整的canvas移动化应用
9. 我们课程的目标

• 我们不是主要做游戏开发的
• 要求必须会做基本的用canvas绘制的特效页面：比如，传智前端官网。
• 会用canvas做一些简单的广告、活动页面

1. 我们课程的案例和项目演示
2. canvas的标准：

• 最新标准：http://www.w3.org/TR/2dcontext/
• 稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
• 目前来说，标准还在完善中。先用早期的api足够完成所有的应用

二、 <Canvas>初识（重点）

1. <canvas>的初体验：

2. <canvas>标签语法和属性

  2.1 语法

• canvas：画布油布的意思 ==英 [‘k?nv?s] 美 [‘k?nv?s] ==
• 标签名canvas，需要进行闭合。就是一普通的html标签。
• 跟所有的html标签一样，要写在body标签之内。
• 注意：
  • 不要用CSS控制它的宽和高,会让图片拉伸，
  • 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
  • 可以给canvas画布通过style属性设置其它属性（背景色， 边框。。。。）
  • width和hegiht：默认300*150像素
  • ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持
  • 只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
  • 移动端的兼容情况非常理想，基本上随便使用
  • 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
  • 如果浏览器不兼容，最好进行友好提示
    • 得到canvas的上下文对象（是所有的绘制操作api的入口或者集合，相当于是得到画布的控制权，之后便可以通过js在画布上画内容了）
    • 后面的参数是字符串的“2d”,2d表示当前的画布支持2D绘图，如果希望将当前画布支持3d，则传入”webgl”（3d在ie中只有ie11才支持，3d一般应用在3D模型和场景，这里不讨论）

  2.2 注意点

3. 浏览器不兼容的处理

 例如：                     

    <canvas id="cavsElem">

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

    </canvas>

三、 <canvas>的应用（重点）

1. 基本方法：

  1.1  getContext（“2d”）

var canvas  = document.getElementById( ‘cavsElem‘ ); //获得画布

var ctx = canvas.getContext( ‘2d‘ );//注意：2d小写， 3d：webgl

2. 基本的绘制路径（重点）

  2.1 canvas坐标系

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

  2.2 设置绘制起点(moveTo)

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

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

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

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

  2.3 绘制直线(lineTo)

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

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

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

  2.4 路径开始和闭合

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

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

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

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

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

  2.5 描边(stroke)

* 语法：ctx.stroke();

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

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

 英 [str??k]   美 [strok]

  2.6 填充(fill)

* 语法：ctx.fill(); 

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

* 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。

    以下是非0环绕原则的原理：（了解即可，非常少会用到复杂的路径）

    “非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，

    使此线段的终点完全落在路径范围之外。

    图2-14中的那三个箭头所描述的就是上面这个步骤。

    接下来，将计数器初始化为0，

    然后，每当这条线段与路径上的直线或曲线相交时，

    就改变计数器的值。如果是与路径的顺时针部分相交，则加1，

    如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时，

    浏览器就会对其进行填充。

    如果最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了

* 案例： 04填充矩形.html

  2.7 路径的一些属性：

2.7.1 strokeStyle

设置路径的描边样式

2.7.2 fillStyle

设置路径的填充样式

以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba.一般先进行设置样式然后进行绘制。

 例如：

•     ctx.strokeStyle = "red";     
•     ctx.strokeStyle = "#ccc";      
•     ctx.strokeStyle = "rgb(255,0,0)";     
•     ctx.strokeStyle = "rgba(255,0,0,6)";

2.7.3 lineWidth

设置路径的宽度

  2.8 案例：表格绘制.html

3. 绘制矩形（重点）

  3.1 快速创建矩形（rect）

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

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

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

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

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

  3.2 快速创建描边矩形和填充矩形（strokeRect、fillRect）

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

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

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

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

  3.3 清除矩形（clearRect）

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

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

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等都使用的弧度 
      
    • 案例：05绘制圆形.html
    • 案例：06绘制饼状图.html

5. 绘制文字（重点）

  5.1 上下文绘制文字方法（重点）

5.1.1 在画布上绘制“被填充的”文本  （fillText）

* 语法：ctx.fillText(text,x,y,maxwidth);

* 解释：text是输出的文本， x, y是矩形左上角坐标， maxWidth（可选）允许的最大文本宽度，以像素计

* fillText方法在画布上绘制填色的文本。文本的默认颜色是黑色。

效果图：

5.1.2 在画布上绘制文本（strokeText）（无填充）

* 语法：ctx.strokeText(text,x,y,maxwidth);

* 解释：text是输出的文本， x, y是矩形左上角坐标， maxWidth（可选）允许的最大文本宽度，以像素计

* strokeText方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

效果图：

5.1.3 在画布上绘制文本（measureText）（无填充）

* 语法：ctx.measureText(text).width;

* 解释：text是要得到宽度的文本

* measureText 方法返回包含一个对象，该对象包含以像素计的指定字体宽度

* 单词：measure 测量；估量；权衡   英 [‘me??]   美 [‘m???]

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

• font 设置或返回文本内容的当前字体属性
  • font 属性使用的语法与 CSS font 属性相同。
  • textAlign 设置或返回文本内容的当前对齐方式
    • start : 默认。文本在指定的位置开始。
    • end : 文本在指定的位置结束。
    • center: 文本的中心被放置在指定的位置。
    • left : 文本左对齐。
    • right : 文本右对齐。

例如：ctx.font = "18px ‘微软雅黑‘";

    * 例如：ctx.textAlign = ‘left‘;         

• textBaseline 设置或返回在绘制文本时使用的当前文本基线
  • alphabetic ： 默认。文本基线是普通的字母基线。
  • top ： 文本基线是 字符的顶端。。
  • hanging ： 文本基线是悬挂基线。
  • middle ： 文本基线是字符的正中。
  • ideographic： 文本基线是字符基线。
  • bottom ： 文本基线是字符的底端。

    例如： ctx.textBaseline = ‘top‘;

    单词:

     alphabetic: 字母的；照字母次序的   [,?lf?‘b?t?k]

     ideographic：表意的；表意字构成的   英 [,?d???‘ɡr?f?k]   美 [,?d??‘gr?f?k]

  5.3 综合案例：

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

    效果图：

  5.4  案例：文字绘制.html

  5.5 绘制图片（重点）

5.5.1  基本绘制图片的方式

* 语法：context.drawImage(img,x,y);

* 解释：x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。

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

* 语法：context.drawImage(img,x,y,width,height);   

* 解释：width 绘制图片的宽度，  height：绘制图片的高度

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

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

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

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

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

* 解释：

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

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

    其他同上

5.5.4 用JavaScript创建img对象

第一种方式： 

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

第二种方式：

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

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

    img.alt = "文本信息";

    img.onload = function() {

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

    }

五、 <canvas>补充api(其它方法)：

1. Canvas颜色样式

• fillStyle  : 设置或返回用于填充绘画的颜色
• strokeStyle  : 设置或返回用于笔触的颜色

以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba.一般先进行设置样式然后进行绘制。

 例如：

•     ctx.strokeStyle = "red";     
•     ctx.strokeStyle = "#ccc";     
•     ctx.strokeStyle = "rgb(255,0,0)";     
•     ctx.strokeStyle = "rgba(255,0,0,6)";
• shadowColor  ：   设置或返回用于阴影的颜色
• shadowBlur   ：   设置或返回用于阴影的模糊级别,大于1的正整数，数值越高，模糊程度越大
• shadowOffsetX：   设置或返回阴影距形状的水平距离
• shadowOffsetY：   设置或返回阴影距形状的垂直距离

2.  设置阴影（了解，少用，性能差）

示例代码：

3. 复杂样式（了解）

  3.1 创建线性渐变的样式（了解）

 注意点：

• 一般不用，都是用图片代替，canvas绘制图片效率更高。
• 线性渐变可以用于 矩形、圆形、文字等颜色样式
• 线性渐变是一个对象
• ctx.createLinearGradient(x0,y0,x1,y1);

n  x0:起点的横坐标

n  y0:起点的纵坐标

n  x1:结束点的横坐标

n  y1:结束点的纵坐标

示例：

 //创建线性渐变的对象，

  3.2 设置圆形渐变（径向渐变）（了解）

• 创建放射状/圆形渐变对象。可以填充文本、形状等

n  语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);

n  x0:渐变的开始圆的横坐标

n  y0:渐变的开始圆的纵坐标

n  r0:渐变的开始圆的半径

n  x0:渐变的结束圆的横坐标

n  y0:渐变的结束圆的纵坐标

n  r0:渐变的结束圆形的半径

• radial   半径的；放射状的；光线状的   英 [‘re?d??l]   美 [‘red??l]
• ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素

  3.3 绘制背景图（了解）

n  image ：规定要使用的图片、画布或视频元素。

n  repeat ： 默认。该模式在水平和垂直方向重复。

   其它值 ：

u repeat   ：   默认。该模式在水平和垂直方向重复。

u repeat-x ：   该模式只在水平方向重复。

u repeat-y ：   该模式只在垂直方向重复。

u no-repeat：   该模式只显示一次（不重复）。

• pattern：n. 模式；图案；样品  英 [‘p?t(?)n]   美 [‘p?t?n]
  • scale() 方法缩放当前绘图，更大或更小
  • 语法：context.scale(scalewidth,scaleheight)

  3.4 变换（重点）

3.4.1 缩放（重点）

n  scalewidth  :  缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)

n  scaleheight :  缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

• 注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
• translate() 方法重新映射画布上的 (0,0) 位置
• 语法：context.translate(x,y)

3.4.2 位移画布（重点）

n   x：   添加到水平坐标（x）上的值

n   y：   添加到垂直坐标（y）上的值

• 注意：发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
• rotate() 方法旋转当前的绘图
• 语法：context.rotate(angle)

3.4.3 旋转（重点）

n   angle：   参数是弧度（PI）

注意：如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

3.4.4 绘制环境保存和还原（重要）

• context.save() 保存当前环境的状态（可以把当前绘制环境进行保存到缓存中）
• context.restore() 返回之前保存过的路径状态和属性(获取最近缓存的ctx)

注意：一般配合位移画布使用。

3.4.5 设置绘制环境的透明度（了解）

• context.globalAlpha=number;

n  number:透明值。必须介于 0.0（完全透明)与 1.0（不透明） 之间。

注意：设置透明度是全局的透明度的样式。注意是全局的。

3.4.6 画布限定区域绘制（了解）

• clip() 方法从原始画布中剪切任意形状和尺寸
• 语法：context.clip()

n   没有参数

注意：

2  一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。

2  一般配合绘制环境的保存和还原。

位移画布一般配合缩放和旋转等

3.4.7 画布保存base64编码内容（重要）

• toDataURL() 把canvas绘制的内容输出成base64内容。
• 语法：canvas.toDataURL(type, encoderOptions);

n   type：   设置输出的类型，比如 image/png   image/jpeg等

n  encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者image/webp才起作用。

代码：

3.4.8 画布渲染画布（重要）

• drawImage() 在一个画布上画
• 语法：context.drawImage(img,x,y)

n   img ：也可以是画布，也就是把一个画布整体的渲染到另外一个画布上。

代码：

3.4.9 了解：线条样式（了解）

• lineCap     ：设置或返回线条的结束端点(线头、线冒)样式

n    butt  ：  默认。向线条的每个末端添加平直的边缘。

u butt -  翻译.：屁股；烟头；笑柄；靶垛；  英 [b?t]   美 [b?t]

n    round ：  向线条的每个末端添加圆形线帽。

n    square：  向线条的每个末端添加正方形线帽。     

• lineJoin    ：设置或返回两条线相交时，所创建的拐角类型

n  bevel:   创建斜角。

u bevel  - 翻译. 斜角；斜面  英 [‘bev(?)l]  美 [‘b?vl]

n  round:   创建圆角。

n  miter:   默认。创建尖角

• lineWidth   设置或返回当前的线条宽度
• miterLimit        设置或返回最大斜接长度

2  意思:  斜接 英 [‘ma?t?] 

2  斜接长度指的是在两条线交汇处内角和外角之间的距离。

2  一般用默认值：10就可以了。除非需要特别长的尖角时，使用此属性。

3.4.10   了解贝塞尔曲线（知道有）

绘制一条二次贝塞尔曲线:

• quadraticCurveTo()二次贝塞尔曲线
• quadratic：二次方的意思， 英 [kw?‘dr?t?k]   美 [kwɑ‘dr?t?k]
• Curve：曲线的意思， 英 [k??v]   美 [k?v]
• 语法： context.quadraticCurveTo(cpx,cpy,x,y);

参数：

2      cpx：   贝塞尔控制点的 x 坐标

2      cpy：   贝塞尔控制点的 y 坐标

2      x  ：   结束点的 x 坐标

2      y  ：   结束点的 y 坐标  

绘制一条三次贝塞尔曲线

• bezierCurveTo():绘制一条三次贝塞尔曲线
• 语法： context.quadraticCurveTo(cpx,cpy,x,y);

参数：

2      cp1x：    第一个贝塞尔控制点的 x 坐标

2      cp1y：    第一个贝塞尔控制点的 y 坐标

2      cp2x：    第二个贝塞尔控制点的 x 坐标

2      cp2y：    第二个贝塞尔控制点的 y 坐标

2      x  ：   结束点的 x 坐标

2      y  ：   结束点的 y 坐标  

//绘制复杂的贝塞尔曲线

3.4.11   了解创建两条切线的弧（知道有）

• arcTo在画布上创建介于当前起点和两个点形成的夹角的切线之间的弧
• quadratic：二次方的意思， 英 [kw?‘dr?t?k]   美 [kwɑ‘dr?t?k]
• Curve：曲线的意思， 英 [k??v]   美 [k?v]
• 语法： context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。

参数：

2       x1:  弧的端点1的 x 坐标

2       y1:  弧的端点1的 y 坐标

2       x2:  弧的端点2(终点)的 x 坐标

2       y2:  弧的端点2(终点)的 y 坐标

2       r :  弧的半径 

代码：

3.4.12   了解判断点是否在路径中（知道有）

• context.isPointInPath(x,y);

    //isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。

    //判断x,y坐标的点是否在当前的路径中。

3.4.13   了解文本宽度计算（知道有）

• context.measureText(text).width;
• setTransform()  将当前转换重置为单位矩阵。然后运行 transform()
• transform() 替换绘图的当前转换矩阵
• globalCompositeOperation   设置或返回新图像如何绘制到已有的图像上
• 像素操作

  3.5 如果以后做canvas游戏方向开发深入学习可以扩展内以下容：

六、 konva库的学习：

在开发过程中，为了提高开发效率。简化开发过程，通常会用一些别人封装好的一些库来编写代码。konva就是其中一个。

1.  Konva的整体理念

• 舞台的概念的引入。整个视图看做是一个舞台 stage
• 舞台中可以绘制很多个层 layer
• layer下面可以有很多的group
• group下面可以有 矩形、图片、其他形状等
• 参看：快速上手文档---查看翻译文档
• https://konvajs.github.io/

HTML5的新标签之一的Canvas

标签：环境   矩形区域   fill   圆形   组件   css3   banner   mac os   top   

原文地址：http://www.cnblogs.com/famensaodiseng/p/7209013.html