动画

canvas

2017-03-06  本文已影响309人  J_L_L

一、canvas简介

1.1 什么是canvas？（了解）

    <canvas></canvas>
     英 ['kænvəs]  美 ['kænvəs]   帆布 画布

1.2 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做一些简单的广告、活动页面

  10. 我们课程的案例和项目演示

  11. canvas的标准：

二、canvas绘图基础

2.0 sublime配置canvas插件（推荐）

推荐：
    安装插件：AndyJS2
    github地址： https://github.com/malun666/AndyJS2
    直接下载到：X:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages

2.1 Canvas标签

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

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

    例如：                     
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
    </canvas>

2.2 canvas绘图上下文context

2.2.1 Context：Canvas的上下文、绘制环境。（重点掌握）

var canvas  = document.getElementById( 'cavsElem' ); //获得画布
var ctx = canvas.getContext( '2d' );//注意：2d小写， 3d：webgl

2.3 基本的绘制路径（重点）

2.3.1 canvas坐标系

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

[图片上传失败...(image-94e325-1528037460116)]

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]

    html部分：
        <canvas id="cavsElem">
            你的浏览器不支持canvas，请升级浏览器
        </canvas>

    javascript部分：

    //===============基本绘制api====================
    //获得画布
    var canvas = document.querySelector('#cavsElem');
    var ctx = canvas.getContext('2d');  //获得上下文

    canvas.width = 900;     //设置标签的属性宽高
    canvas.height = 600;    //千万不要用 canvas.style.height
    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.7 填充(fill)

* 语法：ctx.fill(); 
* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。


* 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。
    
    以下是非0环绕原则的原理：（了解即可，非常少会用到复杂的路径）
    “非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，
    使此线段的终点完全落在路径范围之外。
    图2-14中的那三个箭头所描述的就是上面这个步骤。
    接下来，将计数器初始化为0，
    然后，每当这条线段与路径上的直线或曲线相交时，
    就改变计数器的值。如果是与路径的顺时针部分相交，则加1，
    如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时，
    浏览器就会对其进行填充。
    如果最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了

[图片上传失败...(image-4e5f18-1528037460116)]

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

* 语法：ctx.rect(x, y, width, height);
* 解释：x, y是矩形左上角坐标， width和height都是以像素计
* rect方法只是规划了矩形的路径，并没有填充和描边。
* 改造案例：04填充矩形.html
*rect: abbr. 矩形（rectangular）；收据（receipt）

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

* 语法： ctx.strokeRect(x, y, width, height);
    - 参数跟2.3.8相同，注意此方法绘制完路径后立即进行stroke绘制
* 语法：ctx.fillRect(x, y, width, height);
    - 参数跟2.3.8相同， 此方法执行完成后。立即对当前矩形进行fill填充。

2.3.10 清除矩形(clearRect)

* 语法：ctx.clearRect(x, y, width, hegiht);
* 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

2.4 绘制圆形（arc)

2.5 绘制文字（会使用就可以了）

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

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

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

[图片上传失败...(image-df7c61-1528037460116)]

    例如： ctx.textBaseline = 'top';
    单词:
     alphabetic: 字母的；照字母次序的   [,ælfə'bɛtɪk]
     ideographic：表意的；表意字构成的   英 [,ɪdɪəʊ'ɡræfɪk]   美 [,ɪdɪə'græfɪk]

[图片上传失败...(image-902564-1528037460116)]
[图片上传失败...(image-638716-1528037460116)]

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：绘制图片的高度
如果指定宽高，最好成比例，不然图片会被拉伸</em>
    等比公式：  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() {
        //图片加载完成后，执行此方法
    }

2.6.5 面向对象基础复习补充：

    * var o = { name: '123', age: 18 }; //json方式创建
    * var o = new Object();  //通过new的方式创建
    * var o = new Persion(); //通过类的构造函数创建

    * json的方式： var o = { age: 19 };
    * 直接添加属性：var o = {};  o.age = 19;//太分散了，不利于管理
    * 由于js动态语言的特性，如果属性不存在的时候，直接添加属性。
    * 构造函数添加属性
    * 原型添加公共的属性

2.6.6 补充 sublime制作代码段（推荐--已结讲过了）

第一步：sublime菜单栏→ 工具 → 制作代码段

第二步：修改输出的sublime代码段文本

<snippet>
    <content><![CDATA[
1、这里放要tab键 输出的内容
2、 ${1:this} 占位符，tab可以进行切换，数字是切换的索引。
    ：后面的是默认的文本。
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>简写的字母</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

第三步：保存到插件的文件夹中，后缀名为：.sublime-snippet
比如我存放的位置：
C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippets
snippets是我自己新建的文件夹。

三、 canvas进阶

3.1 Canvas颜色样式和阴影

3.1.1 设置填充和描边的颜色（掌握）

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

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

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

    ctx.fillStyle = "rgba(255,0,0, .9)"
    ctx.shadowColor = "teal";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.fillRect(100, 100, 100, 100);

例如：

3.2 复杂样式（了解）

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

    例如：
    //创建线性渐变的对象，
    var grd=ctx.createLinearGradient(0,0,170,0);
    grd.addColorStop(0,"black");  //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
    grd.addColorStop(1,"white");  //添加一个渐变颜色
    ctx.fillStyle =grd;           //关键点，把渐变设置到 填充的样式

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

var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
rlg.addColorStop(0, 'teal');    //添加一个渐变颜色
rlg.addColorStop(.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg;//设置 填充样式为延续渐变的样式
ctx.fillRect(100, 100, 500, 500);

3.2.3 绘制背景图（了解）

    var ctx=c.getContext("2d");
    var img=document.getElementById("lamp");
    var pat=ctx.createPattern(img,"repeat");
    ctx.rect(0,0,150,100);
    ctx.fillStyle=pat;//  把背景图设置给填充的样式
    ctx.fill();

3.3 变换（重点）

3.3.1 缩放（重点）

3.3.2 位移画布（重点）

3.3.3 旋转（重点）

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

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

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

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

    案例1：
    var canvas = document.getElementById("canvas");
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
    // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
    // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

    var img = document.querySelector("#img-demo");//拿到图片的dom对象
    img.src = canvas.toDataURL("image/png");      //将画布的内容给图片标签显示

3.7 画布渲染画布（重要）

    var canvas1 = document.querySelector('#cavsElem1');
    var canvas2 = document.querySelector('#cavsElem2');
    var ctx1 = canvas1.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    ctx1.fillRect(20, 20, 40, 40);      //在第一个画布上绘制矩形

    ctx2.drawImage(canvas1, 10, 10);    //将第一个画布整体绘制到第二个画布上

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

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

3.9.1 绘制一条二次方曲线。

    ctx.beginPath();
    ctx.moveTo(20,20);
    //绘制2次方曲线，贝赛尔曲线
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();

3.9.2 绘制贝塞尔曲线（知道有）

//绘制复杂的贝塞尔曲线
ctx.beginPath();
ctx.moveTo(400,400);
//参数说明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x： 第一个贝塞尔控制点的 x 坐标
// cp1y： 第一个贝塞尔控制点的 y 坐标
// cp2x： 第二个贝塞尔控制点的 x 坐标
// cp2y： 第二个贝塞尔控制点的 y 坐标
// x: 结束点的 x 坐标
// y: 结束点的 y 坐标
ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
ctx.stroke();

[图片上传失败...(image-e6e03b-1528037460117)]

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

//代码demo：
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
//context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。
ctx.arcTo(240, 100, 240, 110, 40);
ctx.lineTo(240, 300);
ctx.stroke();

[图片上传失败...(image-f96218-1528037460117)]

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

context.isPointInPath(x,y);
//isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。
//判断x,y坐标的点是否在当前的路径中。

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

context.measureText(text).width;

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

四、 Canvas开发库封装

4.1封装常用的绘制函数

4.1.1封装一个矩形

//思考：我们用到的矩形需要哪些绘制的东西呢？
1、矩形的 x、y坐标
2、矩形的宽高
3、矩形的边框的线条样式、线条宽度
4、矩形填充的样式
5、矩形的旋转角度
6、矩形的缩小放大
//下面是把上面所有的功能进行封装的代码：
function ItcastRect( option ) {//矩形构造函数
    this._init(option);
}
ItcastRect.prototype = {  //矩形的原型对象
    _init: function( option ) {  //初始化方法
        option = option || {};
        this.x = option.x === 0 ? 0 : option.x || 100;
        this.y = option.y === 0 ? 0 : option.y || 100;
        this.w = option.w || 100;
        this.h = option.h || 100;
        this.angle = option.angle === 0 ? 0 : option.angle || 0;
        this.fillStyle = option.fillStyle || 'silver';
        this.strokeStyle = option.strokeStyle || 'red';
        this.strokeWidth = option.strokeWidth || 4;
        this.scaleX = option.scaleX || 1;
        this.scaleY = option.Y || 1;
    },
    render: function( ctx ) {//把矩形渲染到canvas中
        ctx.save();
        ctx.translate( this.x, this.y );//位移画布
        ctx.rotate( this.angle * Math.PI / 180 );//旋转角度
        ctx.scale( this.scaleX, this.scaleY );//缩放
        ctx.fillStyle = this.fillStyle;
        ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形
        ctx.lineWidth = this.strokeWidth;     //线宽
        ctx.strokeStyle = this.strokeStyle;   //填充样式
        ctx.strokeRect( 0,0,this.w,this.h );  //描边样式
        ctx.restore();
    },
    constructor: ItcastRect
};

//封装圆形的代码的答案：不要偷看
function ItcastCircle( option ) {
    this._init( option );
}
ItcastCircle.prototype = {
    _init: function( option ) {
        option = option || {};
        this.x = option.x === 0 ? 0 : option.x || 100;
        this.y = option.y === 0 ? 0 : option.y || 100;
        this.w = option.w || 100;
        this.h = option.h || 100;
        this.angle = option.angle === 0 ? 0 : option.angle || 0;
        this.fillStyle = option.fillStyle || 'silver';
        this.strokeStyle = option.strokeStyle || 'red';
        this.strokeWidth = option.strokeWidth || 4;
        this.scaleX = option.scaleX || 1;
        this.scaleY = option.Y || 1;
        this.opactity = option.opactity || 1;
        this.counterclockwise = 
            option.counterclockwise === true ? true : option.counterclockwise || false;
        this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;
        this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;
        this.startAngle = this.startAngle * Math.PI/180;
        this.endAngle = this.endAngle * Math.PI / 180;
        this.r = option.r || 100;
    },
    render: function( ctx ) {
        ctx.save();
        ctx.translate( this.x, this.y);
        ctx.scale( this.scaleX, this.scaleY );
        ctx.rotate( this.agnle * Math.PI / 180 );
        ctx.globalAlpha = this.opacity;
        ctx.fillStyle = this.fillStyle;
        ctx.strokeStyle = this.strokeStyle;
        ctx.moveTo(0, 0);
        ctx.arc( 0, 0, this.r, this.startAngle, this.endAngle, this.counterclockwise);
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    },
    constructor: ItcastCircle
};

4.2 第三方库使用

https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/

 http://www.egret-labs.org/

http://threejs.org/

官网：http://konvajs.github.io/
    特点：
     * 小巧、使用方便、适合移动端和pc端
     * 支持丰富的事件处理操作
     * 支持类似JQuery的操作方式（顺带能复习jQueyr）
     * 开源，可以随意更改
     * 社区更新比较活跃，github托管源码
     * 性能也不错

五、Konva的使用快速上手

5.1 Konva的整体理念

                  Stage
                    |
             +------+------+
             |             |
           Layer         Layer
             |             |
       +-----+-----+     Shape
       |           |
     Group       Group
       |           |
       +       +---+---+
       |       |       |
    Shape   Group    Shape
               |
               +
               |
             Shape

5.2 Konva矩形案例

5.2.1 创建一个矩形： Konva.Rect(option);

    //Konva使用的基本案例
    //第一步：创建舞台
    var stage = new Konva.Stage({
        container: 'container',     //需要存放舞台的Dom容器
        width: window.innerWidth,   //设置全屏
        height: window.innerHeight
    });

    //第二步：创建层
    var layer = new Konva.Layer();  //创建一个层
    stage.add(layer);               //把层添加到舞台

    //第三步： 创建矩形
    var rect = new Konva.Rect({     //创建一个矩形
        x: 100,                     //矩形的x坐标，相对其父容器的坐标
        y: 100,                      
        width: 100,                 //矩形的宽度
        height: 100,                //矩形高度
        fill: 'gold',               //矩形填充的颜色
        stroke: 'navy',             //矩形描边的颜色
        strokeWidth: 4,             //填充宽度
        opactity: .2,               //矩形的透明度
        scale: 1.2,                 //矩形的缩放 1：原来大小
        rotation: 30,               //旋转的角度，是deg不是弧度。
        cornerRadius: 10,           //圆角的大小（像素） 
        id: 'rect1',                //id属性，类似dom的id属性
        name: 'rect',
        draggable: true             //是否可以进行拖拽
    });

    //创建一个组
    var group = new Konva.Group({
        x: 40,      
        y: 40,
    });
    group.add( rect );  //把矩形添加到组中
    
    //第四步： 把形状放到层中
    layer.add( group ); //把组添加到层中
    layer.draw();       //绘制层到舞台上

5.3 Konva的动画系统

5.3.1 tween对象(重点)

//案例：
var tween = new Konva.Tween({
    node: rect,             //要进行动画的Konva对象
    x: 300,                 //要进行动画的属性
    opacity: .8,            
    duration: 1,            //持续时间
    easing: Konva.Easings.EaseIn, //动画的动画效果
    yoyo: true,             //是否进行循环播放的设置
    onFinish: function() {
        //动画执行结束后，执行此方法
    }
});

tween.play();   //启动动画

5.3.2 动画to的使用

    //案例：
    var rect = new Konva.Rect({
        x: 10,
        y: 10,
        width: 100,
        height: 100,
        fill: 'red'
    });
    layer.add(rect);
    layer.draw();

    //动画系统
    rect.to({
        x: 100,
        y: 100,
        opactity: .1,
        duration: 3,
        onFinish: function() {

        }
    });

    //to: 就是对tween的简单应用。

5.3.3 Animate的应用

    var anim = new Konva.Animation(function(frame) {
        //动画系统提供的frame有三个属性可以使用：
        var time = frame.time, // 动画执行的总时间
            timeDiff = frame.timeDiff, // 距离上一帧的时间
            frameRate = frame.frameRate; // 帧率（既1000/间隔时间）
       
       //动画的动作

    }, layer);
    
    anim.start();//启动动画

    //anim.stop();//结束动画

5.3.4 循环播放动画的实现

    //总体思路，使用tween 配合onFinish事件中重新播放动画，达到循环播放的效果
    var loopTween = new Konva.Tween({
        node: star, //设置要表现动画的 Konva对象
        rotation: 360,  //旋转360度
        duration: 2,    //动画持续时间
        easing: Konva.Easings.Linear,
        onFinish: function() {
            // this === loopTween //true
            this.reset();//重置动画
            this.play(); //重新播放动画
        }
    });
    loopTween.play();

5.3.5 回放且循环播放动画

    rect.to({
        duration: 2,
        scale: 1.5,
        yoyo: true// 此设置也可以用于 tween
    });

5.3.6 进度条案例

5.3.7 传智官网案例

    var group = new Konva.Group({
        x: 0,
        y: 0
    });
    group.add(rect);

5.4 Konva的事件（重要）

    var rect = new Konva.Rect({
        x: 100,
        y: 100,
        fill: 'red',
        width: 200,
        height: 200
    });

    //绑定事件 Konva支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend

    rect.on('click', function(){   //jQuery一模一样！！
        console.log('^_^  ^_^');
    });

    //绑定多个事件
    rect.on('click mousemove',function(e){

    });

    //解除绑定事件
    rect.off('click');             //这不是jQuery吗？

    //触发事件
    rect.fire('click');

    //取消事件冒泡
    rect.on('click', function(evt) {
      alert('You clicked the circle!');
      evt.cancelBubble = true;      //取消事件冒泡
    });

5.5 Konva的选择器

    //组中查找圆形的Konva对象
    groupCircle.find('Circle').each(function( circle, index ){
        circle.setZIndex( 3 - index );
    });

5.6 饼状图案例

5.7 柱状图案例

六、Canvas项目实战

七、Canvas优化

 <!-- requestAnim shim layer by Paul Irish -->
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
  

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

var canvas, context, toggle;

init();
animate();

function init() {

    canvas = document.createElement( 'canvas' );
    canvas.width = 512;
    canvas.height = 512;

    context = canvas.getContext( '2d' );

    document.body.appendChild( canvas );

}

function animate() {
    requestAnimFrame( animate );
    draw();

}

function draw() {

    var time = new Date().getTime() * 0.002;
    var x = Math.sin( time ) * 192 + 256;
    var y = Math.cos( time * 0.9 ) * 192 + 256;
    toggle = !toggle;

    context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
    context.beginPath();
    context.arc( x, y, 10, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();

}
上一篇下一篇

猜你喜欢

热点阅读