DAY28 canvas画布及案例（雪花飘落）

Canvas画布

1. 标签<canvas id="can"></canvas> ，<canvas>标签只是图形容器，必须使用脚本来绘制图形。获取元素，设置宽高

    var can = document.getElementById("can");
    //1. 设置宽高
    can.height = document.documentElement.clientHeight;//页面可视区域
    can.width = document.documentElement.clientWidth;

2. 将canvas转换为2D模型

    var content = can.getContext("2d");

3. 画线（！！在画线时一定要先说明起始位置moveTo再说明终点lineTo），否则图形不显示，线条颜色默认为黑色

 content.moveTo(10, 10);//起始
 content.lineTo(100, 100);//终点
 content.stroke();

4. 绘制文字：纵坐标是文字底部距离浏览器顶部的距离，字体可以任意直接设置

     content.font = "30px 微软雅黑";//字体直接设置
     content.fillText("Hello World", 300, 50);//实心字体
     content.strokeText("Hello World", 200, 100);//实心字体

5. 绘制矩形：实心和线性（不需要另外书写stroke或者fill，直接调用各自的绘制函数即可），也可以使用rect()创建矩形后再使用stroke()或者fill(),以及清除一部分clearRect();

参数为：起点坐标，宽，高

      //实心
     content.fillRect(400, 100, 40, 50);
     //    content.fill();//实心填充
     content.clearRect(400, 110, 10, 10);//清除一小部分
     //线型
     content.strokeRect(10, 300, 40, 50);
     // content.stroke();画线型*/

6. 绘制图片：

drawImage(image, dx, dy) //起始坐标
drawImage(image, dx, dy, dw, dh) //起始坐标加图片宽高

接口的 完整参数：drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

一个很详细的博客：绘制图片的各个参数详解

 	var image = new Image();
    image.src = "./tea/img/1.png";
    content.drawImage(image, 0, 0, 200, 200);

7. 画圆
   arc(x,y,r,start,stop，boolean)，其中布尔值决定顺时针(false)或者逆时针（true）,不写时默认为false

参数为：起点坐标，半径，起始角度，结束角度，逆时针（true）

    content.arc(95,50,40,0,Math.PI,true);
    content.stroke();//边线
    content.fill();//填充*/

8. 弧线：
   

    content.beginPath();
    content.moveTo(20,50);           // 创建起始点
    content.lineTo(100,50);          // 创建水平线
    content.arcTo(150,50,150,100,50); // 创建弧
    content.lineTo(150,200);         // 创建垂直线
    content.stroke();                // 画出来*/

9. 椭圆：
   当半径x和y相等时，画出来的图形为圆
   
   

  //同样起点的y值是以图形的下端距离页面顶部的距离
    content.ellipse(200,200,100,200,2*Math.PI,0,2*Math.PI,true);
  	content.strokeStyle="green";
    content.stroke();

10.渐变色：线性渐变和圆形渐变；使用百分比渐变时，线性渐变从右下向左上渐变；

	/*线性*/
   var linear=content.createLinearGradient(300,300,100,200);
	/*圆形渐变*/
   //var linear=content.createRadialGradient(200,200,0,200,200,100);
    linear.addColorStop(0.2,"green");
    linear.addColorStop(0.4,"blue");
    linear.addColorStop(0.6,"orange");
    linear.addColorStop(0.8,"pink");
    linear.addColorStop(1,"black");
    content.fillStyle=linear;
    content.ellipse(200,200,100,200,2*Math.PI,0,2*Math.PI,true);
    content.fill();

线性渐变：

圆形渐变：

雪花案例

1. requestAnimationFrame：屏幕刷新一次，动画执行一次
   一篇很好的博客：setTimeout和此方法的区别

设计思路

1. 引入canvas标签，设置宽高，转换为2D模型

 var myCanvas = document.getElementById("myCanvas");
    var snow = [];
    /*设置背景宽高*/
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    myCanvas.width = w;
    myCanvas.height = h;
    // 转换为2D模型
    var ctx = myCanvas.getContext("2d");

2. 设置背景

 /*画背景*/
    drawBack();
    function drawBack() {
        var img = new Image;
        img.src = "./tea/img/2.jpg";
        ctx.drawImage(img, 0, 0, w, h);
    }

3. 画雪花（drawImage）

在随机产生雪花的起点y坐标时，如果设置的值大于600，产生的雪花会集中在页面顶部一层

    /*画雪花*/
    for (var i = 0; i < 150; i++) {
        var snowImg = new Image;
        snowImg.setAttribute("data-way", Math.floor(Math.random() * 2));
        var sw = Math.random() * 20 + 10;/*雪花大小为10~20*/
        var sx = Math.random() * w;
        var sy = Math.random() * 600;
        snowImg.src = "./tea/img/snow.png";
        ctx.drawImage(snowImg, sx, sy, sw, sw);
        snow.push([snowImg, sx, sy, sw]);
    }

4.添加 计时器让雪花动态飘落

给每个雪花在创建对象时添加自定义属性，决定它的风向（0，1）

    /*遍历集合 添加到计时器中*/
    loop();
    function loop() {
        ctx.clearRect(0, 0, w, h);//清除之前雪花
        drawBack();//并重新添加背景图片
        for (var i = 0; i < snow.length; i++) {
            /*左右飘落*/
            var r = Math.random();
            var x = snow[i][1];
            /*判断雪花的风向*/
            if (snow[i][0].getAttribute("data-way") == 0) {
                x = ++snow[i][1];
            } else {
                x = --snow[i][1];
            }
            /*雪花到达左右边界*/
            if (x < 0) {
                snow[i][1] = w - snow[i][3];
            }
            if (x > w) {
                snow[i][1] = 0;
            }
            /*雪花到达地面就消失*/
            var y = ++snow[i][2];
            if (y >= 500) {
                snow[i][2] = 0;
            }
            ctx.drawImage(snow[i][0], x, y, snow[i][3], snow[i][3]);
        }
        window.requestAnimationFrame(loop);
    }