HTML5笔记总结（二）

一、Canvas绘制图形

绘制路径

康康案例（一）绘制圆形

/* 
         绘制圆形
         g.arc(x,y,r,startAngle,endAngle,anticlockwisc)
         startAngle:弧度开始    endAngle：弧度结束
         anticlockwisc：可选的，规定应该是逆时针还是顺时针绘图  
             默认false顺时针 true逆时针
     */
     //绘制顺时针圆弧
     g.fillStyle = "red";
     g.beginPath();
     g.arc(50,50,40,0,Math.PI*2);
     g.closePath();
     g.fill();

康康案例（二）

康康案例（三）绘制贝塞尔曲线

<script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        //创建画笔
        var g = canvas.getContext("2d");
        /* 
            quadraticCurveTo绘制二次贝塞尔曲线
            quadraticCurveTo(cpx,cpy,x,y)
            (cpx,cpy)绘制点坐标
            (x,y)结束点的坐标
        */
        g.beginPath();
        g.moveTo(10,200);//起始点
        //绘制二次贝塞尔曲线
        g.quadraticCurveTo(40,100,200,200);
        g.stroke();

        g.beginPath();
        g.rect(10,200,10,10);//开始点
        g.rect(40,200,10,10);//控制点
        g.rect(200,200,10,10);//结束点
        g.fill();
        /* 
            创建三次贝塞尔曲线
            bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
        */
        g.beginPath();
        g.moveTo(10.270);//起始点
        g.bezierCurveTo(300,305,310,340,200,270);
        g.stroke();
    </script>

二、绘制贝塞尔曲线

什么是贝塞尔曲线

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。

一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。

一次贝塞尔曲线(线性贝塞尔曲线)

一次贝塞尔曲线其实是一条直线。

二次贝塞尔线

三次贝塞尔线

<script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        //创建画笔
        var g = canvas.getContext("2d");
        /* 
            quadraticCurveTo绘制二次贝塞尔曲线
            quadraticCurveTo(cpx,cpy,x,y)
            (cpx,cpy)绘制点坐标
            (x,y)结束点的坐标
        */
        g.beginPath();
        g.moveTo(10,200);//起始点
        //绘制二次贝塞尔曲线
        g.quadraticCurveTo(40,100,200,200);
        g.stroke();

        g.beginPath();
        g.rect(10,200,10,10);//开始点
        g.rect(40,200,10,10);//控制点
        g.rect(200,200,10,10);//结束点
        g.fill();
        /* 
            创建三次贝塞尔曲线
            bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
        */
        g.beginPath();
        g.moveTo(10.270);//起始点
        g.bezierCurveTo(300,305,310,340,200,270);
        g.stroke();
    </script>

三、绘制图形

1、lineCap 是 canvas 2D API，指定如何绘制每一条线段末端的属性

有3个可选值：

（1）​butt：​ 线段某段以​方形​结束

（2）​round:​ 线段末端以​圆形​结束

（3）​square：​ 线段末端以​方形​结束，但是多出来一个宽度和线宽一样，高度是线段厚度一半的矩形区域，​默认值就是butt​;

var lineCaps =["butt","round","square"]

        for (var i = 0; i < 3; i++) {
                ctx.beginPath();
                ctx.moveTo(20 + 30 * i, 30)
                ctx.lineTo(20 + 30 * i, 100)
                ctx.lineWidth=20;
                ctx.lineCap =lineCaps[i]
                ctx.stroke()
            }
        // 绘制两端线段
        ctx.beginPath();
        ctx.moveTo(0,30);
        ctx.lineTo(300,30)

        ctx.moveTo(0,100);
        ctx.lineTo(300,100);

        ctx.lineWidth=1;
        ctx.strokeStyle='#FF1493'
        ctx.stroke()

2、lineJoin 在同一个path内，设定线条与线条间接合的样式

有三个可选值：

（1）​round:​ 通过填充一个额外的，圆心在相连部分末端的​扇形​，绘制拐角的形状。圆角的半径就是线段的宽度

（2）**bevel：**在相连部分的末端填充一个额外的，以​三角形为底​的区域，每一个部分都有各自的矩形

（3）​miter：​(默认) 相连部分的额外边缘，相交于一点，形成一个额外的​菱形区域​

<script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var g = canvas.getContext("2d");//绘制画笔
        var lineJoins = ["round","bevel","miter"];
        g.lineWidth = 20;
        //绘制W
        for (var i = 0; i < lineJoins.length; i++){
            g.lineJoin= lineJoins[i]
            g.beginPath();
            g.moveTo(50,50 + i * 50)
            g.lineTo(100,100 + i * 50);
            g.lineTo(150,50  +  i * 50);
            g.lineTo(200,100 + i * 50);
            g.lineTo(250,50  +  i * 50);
            g.stroke()
        }
    </script>

3、setLineDash: 绘制虚线

// [实线长度，间隔长度]

ctx.setLineDash([20,5])

4、绘制文本

canvas提供了两种方法来绘制文本

1、ctx.fillText(tetx,x,y,maxwidth) 绘制填充文本

2、ctx.strokeText(tetx,x,y,maxwidth) 绘制轮廓文本

5、绘制图片:

canvas提供了一个方法：drawImage(img,x.y)

ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)

img:图像源

sx,sy,sw,sh:源图像切片位置和大小

dx,dy,dw,dh:定义切片的目标显示位置和大小

四、save与restore

​save():​ 保存画布(canvas)的所有状态

​restore():​ 恢复画布(canvas)的所有状态

五、变 换 API

​（一）translate和css3中的区别？​

canvas的会进行累加，css3的不会； translate：移动的是原点

六、合成 API

​合成：​ 在前面的所有例子中，我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的图形来说，绘制顺序会有限制。不过，我们可以利用

globalCompositeOperation 定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标的图像上

（一）源对象：

source-over:默认值 在源图像上面,新的图层比较高
        source-in:是指留下源图像与目标图像重叠部分(相交部分)
        source-atop:砍掉目标溢出部分
        source-out:只留下源超过目标的部分
        顺序限制 只能放在图形绘制之前
        ctx.globalCompositeOperation = "source-out";

（二）目标：

destination-over:目标在上面,旧的图层高
        destination-in:是指留下源图像与目标图像重叠部分(相交部分)
        destination-atop:砍掉目标溢出来的部分
        destination-out:留下目标超出的部分
      globalAlpha透明度

​案例—绘制月亮​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas合成</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        /* canvas的默认颜色不是白色，默认颜色是根页面颜色一样 */
        html,body{background-color: pink;}
        #mycanvas{background-color: black;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="400" height="400"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext("2d");

        ctx.save();
        ctx.fillStyle="#fff";
        ctx.beginPath();
        ctx.arc(200,200,100,2*Math.PI,false);
        ctx.fill();

        ctx.save();
        ctx.beginPath();
        ctx.globalCompositeOperation = "destination-out"
        ctx.fillStyle = "red";
        ctx.arc(150,200,100,2*Math.PI,false);
        ctx.fill();
        ctx.restore();//释放
    </script>
</body>
</html>

Canvas动画

（一）动画的基本步骤

1、清空canvas再绘制每一帧动画之前，需要清空所有，清空所有最简单的做法是clearRect()方法

2. 保存 canvas 状态 如果在绘制的过程中会更改 canvas 的状态(颜色、移动了坐标原点等),又

在绘制每一帧时都是原始状态的话，则最好保存下 canvas 的状态

3. 绘制动画图形这一步才是真正的绘制动画帧

4. 恢复 canvas 状态如果你前面保存了 canvas 状态，则应该在绘制完成一帧之后恢复

canvas 状态。

绘制 – 清空 —绘制 —清空 。。。。。

控制动画

我们可用通过 canvas 的方法或者自定义的方法把图像会知道到 canvas 上。正常情况，我们能看到绘制的结果是在脚本执行结束之后。例如，我们不可能在一个 for 循环内部完成动画。

4. 也就是，为了执行动画，我们需要一些可以定时执行重绘的方法。

5. 一般用到下面三个方法：

setInterval()

setTimeout()

requestAnimationFrame()