Canvas 画布小案例

<script>
    window.onload = function () {
        draw('canvas1');
        draw('canvas2');
        draw('canvas3');
        draw('canvas4');
        draw('canvas5');
        draw('canvas6');
        draw('canvas7');
        draw('canvas8');
        draw('canvas9');
    };

    function draw(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) {
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = "#eeeeef";
        context.fillRect(, , , );
        //形状渐变
        if (id == "canvas1") {
            for (var i = ; i <= ; i++) {
                context.beginPath();
                context.arc(i * , i * , i * , , Math.PI * , true);
　　　　　　　　　　//一定要关闭路径
                context.closePath();
                context.fillStyle = "rgba(255,0,0,0.25)";
                context.fill();
            }
        }
        //莲花形
        else if (id == "canvas2") {
            var dx = ;
            var dy = ;
            var s = ;
            context.beginPath();
            context.fillStyle = "rgb(100,255,100)";
            context.strokeStyle = "rgb(0,0,100)";
            var x = Math.sin();
            var y = Math.cos();
            var dig = Math.PI /  * ;
            for (var i = ; i < ; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(dx + x * s, dy + y * s);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }
        //贝塞尔曲线，从中心圆引出的线都是曲线
        else if (id == "canvas3") {
            var dx = ;
            var dy = ;
            var s = ;
            context.beginPath();
            context.fillStyle = "rgb(100,255,100)";
            var x = Math.sin();
            var y = Math.cos();
            var dig = Math.PI /  * ;
            for (var i = ; i < ; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.bezierCurveTo(dx + x * s, dy + y * s - , dx + x * s + , dy + y * s, dx + x * s, dy + y * s);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }
        //颜色渐变
        else if (id == "canvas4") {
            var g1 = context.createLinearGradient(, , , );
            g1.addColorStop(, "rgb(255,255,0)");
            g1.addColorStop(, "rgb(0,255,255)");
            context.fillStyle = g1;
            context.fillRect(, , , );
            var g2 = context.createLinearGradient(, , , );
            g2.addColorStop(, "rgba(0,0,255,0.5)");
            g2.addColorStop(, "rgba(255,0,0,0.5)");
            for (var i = ; i < ; i++) {
                context.beginPath();
                context.fillStyle = g2;
                context.arc(i * , i * , i * , , Math.PI * , true);
                context.closePath();
                context.fill();
            }
        }
        //径向渐变
        else if (id == "canvas5") {
            var g1 = context.createRadialGradient(, , , , , );
            g1.addColorStop(0.1, "rgb(255,255,0)");
            g1.addColorStop(0.3, "rgb(255,0,255)");
            g1.addColorStop(, "rgb(0,255,255)");
            context.fillStyle = g1;
            context.fillRect(, , , );
        }
        //变形
        else if (id == "canvas6") {
            var canvas = document.getElementById(id);
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeef";
            context.fillRect(, , , );
            context.translate(, );
            context.fillStyle = "rgba(255,0,0,0.25)";
            for (var i = ; i < ; i++) {
                context.translate(, );
                context.scale(0.95, 0.95);
　　　　　　　　　//旋转
                context.rotate(Math.PI / );
                context.fillRect(, , , );
            }
        }
        //组合图形
        else if (id == "canvas7") {
            var oprtns = new Array(
            "source-atop",//只绘制原有图层中被新图层所覆盖的部分与新图层的其他部分，原有图层中的其他部分变成透明
            "source-in",//只显示重叠的部分，其他部分透明
            "source-out",//只显示不重叠的部分，其他部分透明
            "source-over",//表示新图层在原有图层之上
            "destination-atop",
            "destination-in",
            "destination-out",
            "destination-over",
            "lighter",//原图层和新图层均绘制，重叠部分做加色处理
            "copy",//只绘制新图层，原图层中未与新图层重叠的部分变成透明
            "xor"//只绘制不重叠部分
            );
            i = ;
            context.fillStyle = "blue";
            context.fillRect(, , , );
            context.globalCompositeOperation = oprtns[i];
            context.beginPath();
            context.fillStyle = "red";
            context.arc(, , , Math.PI * , false);
            context.fill();
        }
        //阴影图形
        else if (id == "canvas8") {
            context.fillStyle = "#eeeeef";
            context.fillRect(, , , );
            context.shadowOffsetX = ;
            context.shadowOffsetY = ;
            context.shadowColor = "rgba(100,100,100,0.5)";
            context.shadowBlur = 3.5;
            for (var i = ; i < ; i++) {
                context.translate(, )
                Create5Star(context);
                context.fill();
            }
        }
        //复制图片
        else if (id == "canvas9") {
            context.fillStyle = "#ffffff";
            context.fillRect(, , , );
            var image = new Image();
            image.src = "/images/1.jpg";
            image.onload = function () {
                drawImage(context, image);
            }
        }
    }

    //绘制图片
    function drawImage(context, image) {
        //从(0,0)开始绘制
        //context.drawImage(image, 0, 0);

        //从(0,0)开始绘制，大小为200*200
        context.drawImage(image, , , , );

        //drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
        //drawImage(img对象,原图被复制区域的起始坐标和宽高,复制区域在画布上的起始坐标和宽高)
        context.drawImage(image, ,,,,,,,);
    }

    //创建五角星
    function Create5Star(context) {
        var dx = ;
        var dy = ;
        var s = ;
        context.beginPath();
        context.fillStyle = "rgba(255,0,0,0.5)";
        var x = Math.sin();
        var y = Math.cos();
        var dig = Math.PI /  * ;
        for (var i = ; i < ; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
    }
</script>

以上是用Canvas的getContext("2d")方法实现的简单图形。

下面实现当鼠标点击和移动时流星雨效果，利用createjs中的Easeljs：

    <script src="easeljs-0.8.1.min.js"></script>
    <script>
        var canvas;
        var stage;
        var sprite;

        window.onload = function () {
            canvas = document.getElementById("canvas");
            stage = new createjs.Stage(canvas);

            stage.addEventListener("stagemousedown", clickCanvas);
            stage.addEventListener("stagemousemove", moveCanvas);

            var data = {
                images: ["1.jpg"],
                frames: { width: , height: , regX: , regY:  }
            };

            sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
            createjs.Ticker.setFPS();
            createjs.Ticker.addEventListener("tick", tick);
        }

        function tick(e) {
            var t = stage.getNumChildren();
            for (var i = t-; i > ; i--) {
                var s = stage.getChildAt(i);
                debugger;
                s.vY += ;
                s.vX += ;
                s.x += s.vX;
                s.y += s.vY;

                s.scaleX = s.scaleY = s.scaleX + s.vS;
                s.alpha += s.vA;

                if (s.alpha<=||s.y>canvas.height) {
                    stage.removeChildAt(i);
                }
            }
            stage.update(e);
        }

        //点击鼠标
        function clickCanvas(e) {
            debugger;
            addS(Math.random() *  + , stage.mouseX, stage.mouseY, );
        }

        //移动鼠标
        function moveCanvas(e) {
            debugger;
            addS(Math.random() *  + , stage.mouseX, stage.mouseY, );
        }

        function addS(count, x, y, speed) {
            debugger;
            for (var i = ; i < count; i++) {
                var s = sprite.clone();
                s.x = x;
                s.y = y;
                s.alpha = Math.random() * 0.5 + 0.5;
                s.scaleX = s.scaleY = Math.random() + 0.3;

                var a = Math.PI *  * Math.random();
                var v = (Math.random() - 0.5) *  * speed;
                s.vX = Math.cos(a) * v;
                s.vY = Math.sin(a) * v;
                s.vS = (Math.random() - 0.5) * 0.2;//scale 缩放
                s.vA = -Math.random()*0.05 - 0.01;//alpha 透明度
                stage.addChild(s);
            }
        }
    </script>

Createjs：http://createjs.com/

Canvas的API：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D