HTML5新特性之Canvas绘图

1.canvas

canvas:画布，是H5提供2D绘图技术
语法：
    <canvas width=" " height=" ">
        您的浏览器版本太低，请更新！
    </canvas>
canvas标签在浏览器中默认300*150的inline-block,
画布的宽度和高只能使用html/js属性来赋值，不能用CSS样式来赋值!
每个画布上有且只有一个“画笔”对角，该对象进行绘图.
    var ctx = canvas.getContext("2d");

2.使用Canvas绘制矩形

ctx.strokeWidth = 1;       描边宽度(空心)
ctx.fillStyle = "blue"     填充样式/颜色(实心)
ctx.strokeStyle="red";    描边样式(空心);
ctx.fillRect(x,y,w,h);      填充一个矩形
ctx.strokeRect(x,y,w,h);   描边一个矩形 
ctx.clearRect(x,y,w,h);    清除一个矩形范围内所有绘图

练习1：在画布左上角右上角左下角右下角，居中位置画5个100*80矩形

<canvas id="c2" width="500" height="400">您的浏览器版本太低，请更新</canvas>
    <script>
        let c2 = document.querySelector("#c2");
        let ctx = c2.getContext("2d");
        ctx.strokeStyle = "red";
        ctx.strokeRect(0,0,100,80);
        ctx.strokeRect(0,320,100,80);
        ctx.strokeRect(400,0,100,80);
        ctx.strokeRect(400,320,100,80);
        ctx.strokeRect(200,160,100,80);
    </script>

练习2：在画布上描边一个可以(左右;上下;不同方向)移动矩形

        let c2 = document.querySelector("#c2");
        let ctx = c2.getContext("2d");
        ctx.strokeStyle = "red";
        let x = 0;
        let xDirection = 1;  //取为1时向右移动，-1时向左移动
        let timer = setInterval(function task(){
            ctx.clearRect(0,0,500,400);
            x += 1*xDirection;
            if(x>400){
                xDirection =-1;
            }else if(x<=0){
                xDirection = 1;
            }
            ctx.strokeRect(x,0,100,80); 
        },1);

3.canvas绘图文本

一段文本:
ctx.textBaseline = "top/bottom/alphabetic"   #文本垂直对齐方式
ctx.font = " "     字体大小和字体
ctx.fillText(str,x,y);         填充一段文本
ctx.strokeText(str,x,y)      描边一段文本
ctx.measureText(str)      测量文本宽度,返回对象{width:x}

练习:在画布左右移动文本

        let c2 = document.querySelector("#c2");
        let ctx = c2.getContext("2d");
        ctx.textBaseline="top";
        let str = "你好";
        ctx.fillStyle = "red";
        ctx.font = "29px sans-serif";
        let obj = ctx.measureText(str);
        let w = obj.width;
        let x = 0;
        let xDirection = 1;
        let timer = setInterval(function task(){
            ctx.clearRect(0,0,500,400);
            x += 1*xDirection;
            if(x>500-w){
                xDirection = -1;
            }else if(x<=0){
                xDirection = 1;
            }
            ctx.fillText(str,x,0);
        },10)

4.canvas绘图渐变对象

线性渐变:linearGradient
径向渐变:radialGradient
步骤：
    1.创建渐变对象
        var g = ctx.createLinearGradient(x1,y1,x2,y2);
    2.设置颜色点
        g.addColorStop(0,"blue");
        g.addColorStop(0.5,"red");
        g.addColorStop(1,"green");
    3.将渐变对象应用填充或描边样式
        ctx.fillStyle = g;
    4.画矩形画文本
        ctx.fillRect(0,0,500,100);

练习：画出一个由蓝、红、绿渐变的图案

        let c2 = document.querySelector("#c2");
        let ctx = c2.getContext("2d");
        let g = ctx.createLinearGradient(0,0,500,0);
        g.addColorStop(0,"blue");
        g.addColorStop(0.5,"red");
        g.addColorStop(1,"green");
        ctx.fillStyle = g;
        ctx.fillRect(0,0,500,100);

5.canvas绘图：路径

Path：由多个坐标点组成任意形状，路径不可见，可用于描边、填充、裁剪
ctx.beginPath();                开始一条新路径
ctx.closePath();                闭合当前路径
ctx.moveTo(x,y)     	        移动到指定点
ctx.lineTo(x,y)       	        从当前点到指定点画一条直线
ctx.arc(cx,cy,r,start,end);  	绘制圆拱形路径 start,end：开始和结束的角度（弧度）
ctx.stroke();                   对当前路径描边
ctx.fill();                	　　对当前路径填充
ctx.clip()                      对当前路径裁剪

练习：绘制一个坐标轴，x轴用蓝色，y轴用红色

        let c2 = document.querySelector("#c2");
        //x轴
        let ctx = c2.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(20,380);
        ctx.lineTo(300,380);
        ctx.lineWidth=1;
        ctx.strokeStyle="blue";
        ctx.moveTo(290,385);
        ctx.lineTo(300,380);
        ctx.lineTo(290,375);
        ctx.stroke();
        //y轴
        ctx.beginPath();
        ctx.moveTo(20,380);
        ctx.lineTo(20,100);
        ctx.lineWidth=1;
        ctx.strokeStyle="red";
        ctx.moveTo(15,110);
        ctx.lineTo(20,100);
        ctx.lineTo(25,110);
        ctx.stroke();

6.canvas绘图：图像

canvas属于客户端技术,图片在服务器上,所有浏览器必须先下载绘制图片，且等待图片加载成功后再绘制图片.
步骤：
    1:创建图片对象
        var p3 = new Image();
    2:发送请求并且下载图片
        p3.src = "img/p3.png";  //图片路径
    3:图片下载完成，触发事件onload
        p3.onload = function(){
            console.log(p3.width);
            ctx.drawImage(p3,x,y);     //原始大小绘图
            ctx.drawImage(p3,w,y,w,h); //拉伸绘图
        }

7. canvas绘制：变形

Canvas绘图中也有变形技术，可以针对一个图像/图形绘制过程进行变形, rotate;translate;
语法：
    ctx.rotate(弧度)           旋转绘图对象，轴点画布原点(0,0)
    ctx.translate(x,y)        整个画布的原点平移到指定的点
    ctx.save();                 保存画笔所有变形状态值
    ctx.restore();             恢复画布变形状态值到最近一次保存

练习：画两架飞机，左上角画一个绕自己中心旋转的飞机1，右上角飞机2，飞机2的旋转速度是飞机1的2倍

　　提示：每个小飞机"平移+旋转+绘制+逆向旋转+逆向平移"才不会影响后续飞机的绘制，飞机图片长度为200px*100px

        let ctx = c2.getContext("2d");
        let p3 = new Image;
        p3.src = "src/p3.png";
        p3.onload = function () {
            let deg1 = 1; //第一架飞机旋转角度
            let deg2 = 2; //第二家飞机旋转角度

            let timer = setInterval(function task() {
                //绘制飞机1，以图像中间为中心
                //平移--旋转--绘制--逆向旋转--逆向平移
                ctx.save(); //保存位置 (0,0)
                ctx.translate(100, 100);
                ctx.clearRect(-100,-100,250,250);
                ctx.rotate(deg1 * Math.PI / 180);
                ctx.drawImage(p3, -100, -50);
                ctx.restore(); //恢复上次保存的位置
                deg1 += 1;

                //绘制飞机2，以图像中间为中心
                //平移--旋转--绘制--逆向旋转--逆向平移
                ctx.save(); //保存位置
                ctx.translate(400, 100);
                ctx.clearRect(-110,-100,250,250);
                ctx.rotate(deg2 * Math.PI / 180);
                ctx.drawImage(p3, -100, -50);
                ctx.restore(); //恢复上次保存的位置
                deg2 += 2;
            }, 10)
        }