关闭

Canvas绘制图形(一)

标签: Canvas
160人阅读 评论(0) 收藏 举报
分类:
<img src="http://img.blog.csdn.net/20150709090925648?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="296" width="234" alt="" />
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(id)
        {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeef";
            context.fillRect(0,0,300,400);
            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();
        }
    </script>
</head>
<body onload="draw('canvasid')">
    <canvas id="canvasid" width="300" height="400"></canvas>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:32316次
    • 积分:838
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:65篇
    • 译文:0篇
    • 评论:0条
    文章分类