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实现的简单图形，强大的Canvas还有很多功能以后再慢慢学习吧。