Canvas 使用指南和几个套路

一、canvas的简介

是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。请注意 canvas 是行内样式。

总结起来 canvas 的功能就是：

• 使用路径功能来画图
• 渲染图片，和面向对象一起制作小游戏
• 视频渲染，制作开场视频动画，尤其是游戏的开场

看到这里你该猜到了，没错，canvas 就是用来制作 H5 小游戏的。

二、canvas 常见 API

注意：canvas画布设置宽度和高度【不允许使用内部样式、外部样式】，只能通过属性width、height进行设置。

• 文字

// 文字的font-style,font-weight;font-size;font-family
    ctx.font = "italic bold 16px Arial";
    // 文字的颜色
    ctx.fillStyle = "red";
    // 绘画开始
    // 实心文字,文字的x,ys
    ctx.fillText("我是实心文字",100,100);
    //空心文字的颜色
     ctx.strokeStyle = "blue";
    // 空心文字,文字的x,y
    ctx.strokeText("我是空心文字",100,200);

文字

• 矩形

 // 实心矩形的x,y,w,h
    ctx.fillRect(100,100,100,100);
    // 空心矩形
    ctx.strokeRect(200,200,50,50);

矩形

• 直线

直线

• 圆

 ctx.arc(100,100,80,2*Math.PI,false);
    // 设置填充色
    ctx.strokeStyle = "red";
    //  空心圆
    ctx.stroke();

空心圆

// 圆的x,y,r,弧度制的回执角度，逆时针
    ctx.arc(100,100,80,2*Math.PI,false);
    // 设置填充色
    ctx.fillStyle = "red";
    // 设置透明
    ctx.globalAlpha = 0.3;
    //  实心圆
    ctx.fill();

实心圆

• 坐标体系
  canvas 的坐标体系默认情况下是左上角为（0,0） 。
  更改坐标体系：
  ctx.translate(100,100)//由零零点移动到 x 等于一百， y 等于一百
• 旋转特效

// 旋转信号量
    var idx = 0;
    setInterval(function(){
        idx+=0.8;
        // 旋转特效
        // 清屏
        ctx.clearRect(0,0,300,300);
        // 保存坐标系的原点坐标
        ctx.save();
        // 转移坐标系
        ctx.translate(100,100);
        // 旋转1 弧度
        ctx.rotate(idx);
        // 透明度
        ctx.globalAlpha = 0.5
        // 
        ctx.fillStyle = "blue";
        // 画一个圆
        ctx.fillRect(-50,-50,100,100);
        // 恢复原点坐标
        ctx.restore();
    },200);

旋转.gif

1. 元素可以绑定多个同类型事件【后者覆盖前者】
2. 如果想给某一个元素的事件移除：后者覆盖前者，把后者置空即可。

三、canvas实现炫彩小球

炫彩小球.gif

六、图片资源管理器

因为 canvas 要求所有的图片必须完成加载完成，才能在 Canvas 中进行渲染，所以如果demo 里面有很多图片的话，我们就得像个办法来解决这个问题，这个技术就叫图片资源管理器。其中图片的JSON可以单独创建一个文件引包进去，这样就不用写在同一个界面里面了。以下是实现的源代码。

//得到canvas标签
    var myCanvas = document.querySelector("canvas");
    //得到canvas标签的上下文
    var ctx = myCanvas.getContext("2d");
    // 图片的JSON，value是图片的真是名字，一共五张
    var picJSON = {
        "si_1" : "si_1.png",
        "si_2" : "si_2.png",
        "si_3" : "si_3.png",
        "si_4" : "si_4.png",
        "si_5" : "si_5.png"
    }
    // 加法器，计算图片加载的张数
    var count = 0;
    for(let k in picJSON){
        // 备份图片的地址
        var src = picJSON[k];
        // 图片的值变为对象
        picJSON[k] = new Image();
        // 往图片对象上添加图片物理路径
        picJSON[k].src = "./image/" + src;
    }
    // 再次拿到改变后的图片JSON
    for(let k in picJSON){
        // 所有的图片加载完成才能，使用canvas的drawImage
        picJSON[k].onload = function(){
            // 加载完一张计数器就加一
            count++;
            // 计数器的数量等于JSON里面对象的数量，表示所有的图片都加载完成
            if(count == Object.keys(picJSON).length){
                // 输出结果
                console.log("图片加载完成！一共有"+count+"张图");
            }
        }
    }

canvas的基本概念和常用API已经了解了，接下来我们就用它来做一些简单的 H5 小游戏。

敬请期待。。。