html5之canvas

引用：

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

示例：
代码：



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>html5 - canvas</title>
        <meta  http-equiv="doc" content="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial"/>
    </head>
    <body>

            <canvas id="canvas_1" width="600" height="400" style="border:1px solid #ccc;"/>

    <script type="text/javascript">
        var canvas_1 = document.getElementById('canvas_1');
        var ctx = canvas_1.getContext('2d');

        //1. draw line
        ctx.moveTo(20,20);
        ctx.lineTo(20,90);
        ctx.stroke();  // use stroke() method to draw line.

        //2. draw filled triangle.
        ctx.beginPath();
        ctx.moveTo(40,20);
        ctx.lineTo(40,90);
        ctx.lineTo(80,90);
        ctx.closePath();
        ctx.stroke();  // use stroke() method to draw line.
        ctx.fill();    // use fill() method to draw solid graphics.

        //3.1 draw rectangle

        ctx.strokeRect(100,20,70,70);   // hollow.(having a hole or emputy inside)

        //3.2 draw rectangle
        ctx.fillStyle = "green";        // the fillStyle can be passed to a color.
        ctx.fillRect(190,20,50,50);     // solid.


        //4. draw circle
        var cx = 250;
        var cy = 0;
        ctx.beginPath();
        ctx.arc(cx+75,75,50,0,Math.PI*2,true); // Outer circle
        ctx.moveTo(cx+110,75);
        ctx.arc(cx+75,75,35,0,Math.PI,false);  // Mouth (clockwise)
        ctx.moveTo(cx+65,65);
        ctx.arc(cx+60,65,5,0,Math.PI*2,true);  // Left eye
        ctx.moveTo(cx+95,65);
        ctx.arc(cx+90,65,5,0,Math.PI*2,true);  // Right eye
        ctx.stroke();


        // Draw shapes
        var cs = 400;
        var cy = 20;
        for (i=0;i<4;i++){
          for(j=0;j<3;j++){
            ctx.beginPath();
            var x              = cs+25+j*50;               // x coordinate
            var y              = cy+25+i*50;               // y coordinate
            var radius         = 20;                    // Arc radius
            var startAngle     = 0;                     // Starting point on circle
            var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
            var anticlockwise  = i%2==1;                // Draw anticlockwise

            ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

            if (i>1){
              ctx.fill();
            } else {
              ctx.stroke();
            }
          }
        }


        // draw text
        // fillText(text, x, y [, maxWidth])
        ctx.font = "48px serif";
        ctx.fillText("Hello world", 10, 150);

        // stroke text
        // strokeText(text, x, y [, maxWidth])
        ctx.font = "48px serif";
        ctx.strokeText("Hello world", 10, 200);




    </script>

    </body>
</html>
猜你喜欢
