HTML5新特性 之canvas标签(Day1-4)

canvas

  1.什么是canvas?

    1.1 是HTML5提供的一种新标签

    1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素

    1.3 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    1.4 HTML5之前的web页面只能用一些固定样式的标签:比如p、div、h1等,但有了canvas Web页面可以可以丰富多彩。

  2.canvas主要应用的领域

    2.1 游戏:canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛。

    2.2 可视化数据.数据图表格

    2.3 banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。

    2.4 未来=> 模拟器:无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。

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

    2.6 未来=> 图形编辑器:Photoshop图形编辑器将能够100%基于Web实现。

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

  3.canvas 用法介绍

    3.1 canvas,需要进行闭合。就是一普通的html标签,它可以设置width和height属性,但是属性值单位必须是px,否则忽略,它的width和hegiht默认300*150像素

    3.2 注意:

       ①不要用CSS控制它的宽和高,会走出图片拉伸

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

       ③可以给canvas画布设置背景色

  4.canvas兼容问题

    ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持

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

    移动端的兼容情况非常理想,基本上随便使用

    2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持

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

     例如:

        <canvas id="cavsElem">

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

       </canvas>

        浏览器不兼容,可以使用flash等手段进行优雅降级

  5.基本的绘制路径

    5.1 canvas坐标系

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

    5.2 设置绘制起点(moveTo)

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

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

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

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

    5.3 绘制直线(lineTo)

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

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

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

    5.4 路径开始和闭合

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

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

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

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

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

    5.5 描边(stroke)

      * 语法:ctx.stroke();

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

      * stroke: (用笔等)画;轻抚;轻挪;敲击;划尾桨;划掉;(打字时)击打键盘

     canvas绘制的基本步骤:

      o第一步:获得上下文 =>canvasElem.getContext(‘2d‘);

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

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

      o第四步:绘制线(矩形、圆形、图片...) =>ctx.lineTo(x, y)

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

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

   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();           //描边路径

    5.6 填充(fill)

      * 语法: ctx.fill();

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

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

    5.7 快速创建举行的方法(rect()方法)

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

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

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

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

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

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

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

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

    5.9 清除矩形

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

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

    5.10 绘制圆形(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等都使用的弧度

    5.11 绘制文字

      5.11.1 绘制上下文的文字属性 (有印象就行了)

        ·font 设置或返回文本内容的当前字体属性

          font 属性使用的语法与 CSS font 属性相同。

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

        ·textAlign 设置或返回文本内容的当前对齐方式

          start : 默认。文本在指定的位置开始。

          end : 文本在指定的位置结束。

          center: 文本的中心被放置在指定的位置。

          left : 文本左对齐。

          right : 文本右对齐。

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

        ·textBaseline 设置或返回在绘制文本时使用的当前文本基线

          alphabetic : 默认。文本基线是普通的字母基线。

          top : 文本基线是 em 方框的顶端。。

          hanging : 文本基线是悬挂基线。

          middle : 文本基线是 em 方框的正中。

          ideographic: 文本基线是em基线。

          bottom : 文本基线是 em 方框的底端。

         例如: ctx.textBaseline = ‘top‘;

      5.11.2 上下文绘制文字方法

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

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

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

        //综合案例代码:

       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.12绘制图片(drawImage)

      5.12.1 基本绘制图片的方式

        context.drawImage(img,x,y);

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

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

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

        参数说明:width 绘制图片的宽度,  height:绘制图片的高度

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

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

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

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

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

        参数说明:

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

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

        其他同上

      5.12.4 用JavaScript创建img对象

        第一种方式:

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

        第二种方式:

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

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

        img.alt = "文本信息";

        img.onload = function() {

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

         }

  6.canvas进阶

    6.1 Canvas颜色样式和阴影

      6.1.1 设置填充和描边的颜色(掌握)

        ·fillStyle : 设置或返回用于填充绘画的颜色

        ·strokeStyle: 设置或返回用于笔触的颜色

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

        例如:

        ctx.strokeStyle = "red";

        ctx.strokeStyle = "#ccc";

        ctx.strokeStyle = "rgb(255,0,0)";

        ctx.strokeStyle = "rgba(255,0,0,6)";

      6.1.2 设置阴影(了解,少用,性能差)

        ·类比于CSS3的阴影。

        ·shadowColor : 设置或返回用于阴影的颜色

        ·shadowBlur : 设置或返回用于阴影的模糊级别,大于1的正整数,数值越高,模糊程度越大

        ·shadowOffsetX: 设置或返回阴影距形状的水平距离

        ·shadowOffsetY: 设置或返回阴影距形状的垂直距离

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

  6.2 复杂样式

    6.2.1 创建线性渐变的样式

      一般不用,都是用图片代替,canvas绘制图片的效率更高。

      线性渐变可以用于矩形、圆形、文字等颜色样式

      线性渐变是一个对象

      语法:ctx.createLinearGradient(x0,y0,x1,y1);//参数:x0,y0起始坐标,x1,y1结束坐标

    6.2.2 设置圆形渐变(径向渐变)

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

        ·context.createRadialGradient(x0,y0,r0,x1,y1,r1);

        ·参数详解:

          x0: 渐变的开始圆的 x 坐标

          y0: 渐变的开始圆的 y 坐标

          r0: 开始圆的半径

          x1: 渐变的结束圆的 x 坐标

          y1: 渐变的结束圆的 y 坐标

          r1: 结束圆的半径

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

   6.3 变换

    6.3.1 缩放(重点)

      ·scale() 方法缩放当前绘图,更大或更小

      ·语法:context.scale(scalewidth,scaleheight)

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

        scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意:缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。

    6.3.2 位移画布(重点)

      ·ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置

      参数说明:

      ·x: 添加到水平坐标(x)上的值

      ·y: 添加到垂直坐标(y)上的值

      ·发生位移后,相当于把画布的0,0坐标 更换到新的x,y的位置,所有绘制的新元素都被影响。

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

    6.3.3 旋转(重点)

      ·context.rotate(angle); 方法旋转当前的绘图

      ·注意参数是弧度(PI)

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

    6.4 绘制环境保存和还原(重要)

      ·ctx.save() 保存当前环境的状态

      可以把当前绘制环境进行保存到缓存中。

      ·ctx.restore() 返回之前保存过的路径状态和属性

      获取最近缓存的ctx

      ·一般配合位移画布使用。

    6.5 设置绘制环境的透明度(了解)

      ·context.globalAlpha=number;

      ·number:透明值。必须介于 0.0(完全透明) 与 1.0(不透明) 之间。

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

    6.6 画布限定区域绘制(了解)

      ·ctx.clip(); 方法从原始画布中剪切任意形状和尺寸

      ·一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)

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

    6.7 画布保存base64编码内容(重要)

      ·把canvas绘制的内容输出成base64内容。

      ·语法:canvas.toDataURL(type, encoderOptions);

      ·例如:canvas.toDataURL("image/jpg",1);

      ·参数说明:

      type,设置输出的类型,比如 image/png image/jpeg等

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

    6.8 画布渲染画布(重要)

      ·context.drawImage(img,x,y);

      ·img参数也可以是画布,也就是把一个画布整体的渲染到另外一个画布上。

       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);    //将第一个画布整体绘制到第二个画布上

    6.9了解:线条样式(了解)

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

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

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

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

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

        bevel: 创建斜角。

        round: 创建圆角。

        miter: 默认。创建尖角

      ·lineWidth 设置或返回当前的线条宽度

       ·miterLimit 设置或返回最大斜接长度

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

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

    6.10 了解贝塞尔曲线(知道有)

      6.10.1 绘制一条二次方曲线。

        ·微软的画图板中的曲线的颜色。

        ·语法: context.quadraticCurveTo(cpx,cpy,x,y);

        ·参数:

          cpx: 贝塞尔控制点的 x 坐标

          cpy: 贝塞尔控制点的 y 坐标

          x : 结束点的 x 坐标

          y : 结束点的 y 坐标

       ctx.beginPath();

        ctx.moveTo(20,20);

        //绘制2次方曲线,贝赛尔曲线

        ctx.quadraticCurveTo(20,100,200,20);

        ctx.stroke();

    6.10.2 绘制贝塞尔曲线(知道有)

      ·绘制一条三次贝塞尔曲线

      ·语法:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

      ·提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

      ·参数说明:

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

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

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

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

        x: 结束点的 x 坐标

        y: 结束点的 y 坐标

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

        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();

    6.11了解创建两条切线的弧(知道有)

      ·在画布上创建介于当前起点和两个点形成的夹角的切线之间的弧

      ·语法: context.arcTo(x1,y1,x2,y2,r); //类比:css3中的圆角。

      ·例如: ctx.arcTo(240, 100, 240, 110, 40);

      ·参数:

        x1: 弧的端点1的 x 坐标

        y1: 弧的端点1的 y 坐标

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

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

        r : 弧的半径

        //代码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();

    6.12了解判断点是否在路径中(知道有)

      context.isPointInPath(x,y);

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

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

    6.14了解文本宽度计算(知道有)

      context.measureText(text).width;

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

      ·setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

      ·transform() 替换绘图的当前转换矩阵

      ·globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

  7. Canvas开发库封装

    7.1封装常用的绘制函数

      7.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

        };

    7.2 第三方库使用

      ·Rgraph vs 百度的echart

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

      ·国产的egret引擎

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

      ·比较火的3d引擎:treejs

        http://threejs.org/

      ·Konva

        官网:http://konvajs.github.io/

      特点:

         * 小巧、使用方便、适合移动端和pc端

        * 支持丰富的事件处理操作

        * 支持类似JQuery的操作方式(顺带能复习jQueyr)

        * 开源,可以随意更改

        * 社区更新比较活跃,github托管源码

        * 性能也不错

  8.Konva的使用快速上手

    8.1 Konva的整体理念

      ·舞台的概念的引入。整个视图看做是一个舞台 stage

      ·舞台中可以绘制很多个层 layer

      ·layer下面可以有很多的group

      ·group下面可以有 矩形、图片、其他形状等

    8.2 Konva矩形案例

      8.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();       //绘制层到舞台上

    8.3 Konva的动画系统

      8.3.1 tween对象(重点)

        ·tween,英文意思:两者之间, 英 [twi?n] 美 [twin]

        ·tween是控制Konva对象进行动画的核心对象。

        ·tween可以控制所有数字类型的属性进行动画处理,比如:x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等

//案例:

var tween = new Konva.Tween({

node: rect,             //要进行动画的Konva对象

x: 300,                 //要进行动画的属性

opacity: .8,

duration: 1,            //持续时间

easing: Konva.Easings.EaseIn, //动画的动画效果

yoyo: true,             //是否进行循环播放的设置

onFinish: function() {

//动画执行结束后,执行此方法

}

});

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

·tween的控制方法

otween.play(), //播放动画

otween.pause(), //暂停动画

otween.reverse(), //动画逆播放

otween.reset(), //重置动画

otween.finish(), //立即结束动画

oseek:英文:寻找 英 [si?k] 美 [sik]

·tween的缓动控制选项

oKonva.Easings.Linear //线性

oKonva.Easings.EaseIn //缓动,先慢后快

oKonva.Easings.EaseOut //先快后慢

oKonva.Easings.EaseInOut //两头慢,中间快

oKonva.Easings.BackEaseIn //往回来一点,然后往前冲,汽车启动类似...

oKonva.Easings.BackEaseOut

oKonva.Easings.BackEaseInOut

oKonva.Easings.ElasticEaseIn //橡皮筋 英 [?‘l?st?k] 美 [?‘l?st?k]

oKonva.Easings.ElasticEaseOut

oKonva.Easings.ElasticEaseInOut

oKonva.Easings.BounceEaseIn //弹跳;弹起,反跳;弹回 英 [ba?ns] 美 [ba?ns]

oKonva.Easings.BounceEaseOut

oKonva.Easings.BounceEaseInOut

oKonva.Easings.StrongEaseIn //强力

oKonva.Easings.StrongEaseOut

oKonva.Easings.StrongEaseInOut

·动画效果参考: 29Konva动画缓动效果案例.html

8.3.2 动画to的使用

·to就是对tween的封装,比较简单好用。

//案例:

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的简单应用。

8.3.3 Animate的应用

·Animation动画,实际上就是浏览器通知开发者进行绘制,并提供当前的时间

var anim = new Konva.Animation(function(frame) {

//动画系统提供的frame有三个属性可以使用:

var time = frame.time, // 动画执行的总时间

timeDiff = frame.timeDiff, // 距离上一帧的时间

frameRate = frame.frameRate; // 帧率(既1000/间隔时间)

//动画的动作

}, layer);

anim.start();//启动动画

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

8.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();

8.3.5 回放且循环播放动画

·yoyo属性可以进行对动画进行播放完后,回放当前动画,并持续循环来回切换播放。

rect.to({

duration: 2,

scale: 1.5,

yoyo: true// 此设置也可以用于 tween

});

8.3.6 进度条案例

·三角函数的补充

oMath.sin(弧度); //夹角对面的边 和 斜边的比值

oMath.cos(弧度); //夹角侧边 与斜边的比值

·圆形上面的点的坐标的计算公式

ox =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标

oy =y0 + Math.sin(rad) * R;//注意都是弧度

·group的灵活运用

okonva的group很灵活,每个group都有自己的坐标系

ogroup可以包含其他的group,可以对group做整个组的动画

ogroup可以通过getChidren();//可以拿到直接子级元素。

var group = new Konva.Group({

x: 0,

y: 0

});

group.add(rect);

8.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;      //取消事件冒泡

});

8.5 Konva的选择器

·选择方法。

oID选择法:stage.find(‘#id‘); //此方法返回的是一个数组

oname选择法:group.findOne(‘.name‘);//返回一个Konva对象

otype选择法: group.find(‘Circle‘);//查找所有的圆形Konva对象

//组中查找圆形的Konva对象

groupCircle.find(‘Circle‘).each(function( circle, index ){

circle.setZIndex( 3 - index );

});

时间: 2024-10-09 13:36:51

HTML5新特性 之canvas标签(Day1-4)的相关文章

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

Html5新特性 &lt;canvas&gt;画板画直线

 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

HTML5新特性新增功能

HTML5 现如今已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 如:绘图canvas:用于媒介回放的video和audio元素:本地存储localStorage;语义化元素:表单控件等等新增的功能,都是HTML5新特性. 下面列举HTML5新特性详细说明: 一.新的文档类型  (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍 1.新的文档类型 <!DOCTYPE html> 2.脚本和链接无需type <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/Angular.js"></script> 3.语义化的Header 和Footer 这里通俗说下什么叫做语义化,就是:明

HTML5新特性小结

HTML5 新特性 新的DocType: <!DOCTYPE html> 不需要声明文档类型: 脚本和链接不需要type属性,如 lingk, script; 语义化标签,如:header, footer, hgroup, mark, figure, small, article, 属性及校验, 新的属性,如:placeholder, required, autofocus, pattern, autocomplete, data, contenteditable 自动校验,如: requir

HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " stroke="" stroke-width=""> </polyline> #points 一组坐标点 #渐变特效对象:一种特效样式(从一种颜色慢慢过滤另一种颜色效果) #渐变特效对象:(1)创建渐变对象 <defs> (2)在指定图形应用

HTML5新特性data_*自定义属性使用

HTML5 新特性data_*自定义属性使用HTML5规范里增加了一个自定义data属性. 这个自定义data属性的用法非常的简单,就是你可以往 HTML 标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. 使用 data-* 可以解决自定义属性混乱无管理的现状.

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使你已

HTML5新特性有哪些

HTML5新特性有哪些: 1.新的文档类型 2.脚本和链接无需 3.语义Header和Footer The Semantic Header and Footer 4.Hgroup 10.Autofocus 属性 Autofocus Attribute 12.Video 支持 Video Support 13.视频预载 Preload attribute in Videos element 14.显示控制条 15.正规表达式 5.标记元素 6.图形元素 8.占位符 9.必要属性