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(0, 0, 400, 400);
        //形状渐变
        if (id == "canvas1") {
            for (var i = 0; i <= 6; i++) {
                context.beginPath();
                context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
　　　　　　　　　　//一定要关闭路径
                context.closePath();
                context.fillStyle = "rgba(255,0,0,0.25)";
                context.fill();
            }
        }
        //莲花形
        else if (id == "canvas2") {
            var dx = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.fillStyle = "rgb(100,255,100)";
            context.strokeStyle = "rgb(0,0,100)";
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 15 * 11;
            for (var i = 0; i < 30; 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 = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.fillStyle = "rgb(100,255,100)";
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 15 * 11;
            for (var i = 0; i < 30; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }
        //颜色渐变
        else if (id == "canvas4") {
            var g1 = context.createLinearGradient(0, 0, 0, 300);
            g1.addColorStop(0, "rgb(255,255,0)");
            g1.addColorStop(1, "rgb(0,255,255)");
            context.fillStyle = g1;
            context.fillRect(0, 0, 500, 500);
            var g2 = context.createLinearGradient(0, 0, 300, 0);
            g2.addColorStop(0, "rgba(0,0,255,0.5)");
            g2.addColorStop(1, "rgba(255,0,0,0.5)");
            for (var i = 0; i < 10; i++) {
                context.beginPath();
                context.fillStyle = g2;
                context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
                context.closePath();
                context.fill();
            }
        }
        //径向渐变
        else if (id == "canvas5") {
            var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
            g1.addColorStop(0.1, "rgb(255,255,0)");
            g1.addColorStop(0.3, "rgb(255,0,255)");
            g1.addColorStop(1, "rgb(0,255,255)");
            context.fillStyle = g1;
            context.fillRect(0, 0, 500, 500);
        }
        //变形
        else if (id == "canvas6") {
            var canvas = document.getElementById(id);
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeef";
            context.fillRect(0, 0, 500, 500);
            context.translate(200, 50);
            context.fillStyle = "rgba(255,0,0,0.25)";
            for (var i = 0; i < 50; i++) {
                context.translate(25, 25);
                context.scale(0.95, 0.95);
　　　　　　　　　//旋转
                context.rotate(Math.PI / 10);
                context.fillRect(0, 0, 100, 50);
            }
        }
        //组合图形
        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 = 8;
            context.fillStyle = "blue";
            context.fillRect(10, 10, 60, 60);
            context.globalCompositeOperation = oprtns[i];
            context.beginPath();
            context.fillStyle = "red";
            context.arc(60, 60, 30, Math.PI * 2, false);
            context.fill();
        }
        //阴影图形
        else if (id == "canvas8") {
            context.fillStyle = "#eeeeef";
            context.fillRect(0, 0, 500, 500);
            context.shadowOffsetX = 10;
            context.shadowOffsetY = 10;
            context.shadowColor = "rgba(100,100,100,0.5)";
            context.shadowBlur = 3.5;
            for (var i = 0; i < 3; i++) {
                context.translate(100, 100)
                Create5Star(context);
                context.fill();
            }
        }
        //复制图片
        else if (id == "canvas9") {
            context.fillStyle = "#ffffff";
            context.fillRect(0, 0, 500, 500);
            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, 0, 0, 200, 200);

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

    //创建五角星
    function Create5Star(context) {
        var dx = 20;
        var dy = 0;
        var s = 50;
        context.beginPath();
        context.fillStyle = "rgba(255,0,0,0.5)";
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 5 * 4;
        for (var i = 0; i < 5; 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: 20, height: 20, regX: 10, regY: 10 }
            };

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

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

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

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

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

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

        function addS(count, x, y, speed) {
            debugger;
            for (var i = 0; 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 * 2 * Math.random();
                var v = (Math.random() - 0.5) * 30 * 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