canvas案例123

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw(id){
            var canvas  = document.getElementById(id);
            var context = canvas.getContext("2d");
            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();
            }
        }
    </script>
</head>
<body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>

</body>
</html>

　　



2.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw(id){
            var canvas = document.getElementById(id);
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext("2d");
            var g1 = context.createRadialGradient(400,100,0,400,100,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);
        }
    </script>
</head>
<body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>

</body>
</html>

　　



3.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        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,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);
            }
        }
    </script>
</head>
<body onload="draw('canvas')">
    <!--translate(x,y) scale(x,y) rotate(deg)-->
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

　　

posted @ 2017-02-13 16:50  wellwellrightbaby  阅读(175)  评论(0)    收藏  举报