html5之canvas

最新推荐文章于 2024-07-20 22:13:44 发布

iteye_3352

最新推荐文章于 2024-07-20 22:13:44 发布

阅读量76

点赞数

分类专栏： <html>元素文章标签： html5 canvas

本文链接：https://blog.csdn.net/iteye_3352/article/details/82674828

版权

<html>元素专栏收录该内容

10 篇文章 0 订阅

订阅专栏

[b]引用：[/b]

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

[b]示例：[/b]
[img]http://dl2.iteye.com/upload/attachment/0120/7968/852c3ed8-c857-34d0-8fd2-690707d3023f.png[/img]

[b]代码：[/b]




<!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>

iteye_3352

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5之canvas

[b]引用：[/b][url]https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial[/url][b]示例：[/b][img]http://dl2.iteye.com/upload/attachment/0120/7968/852c3ed8-c857-34d0-8fd2-690707d3023f....
复制链接

扫一扫