依宸2016

在工作中学习,在学习中进步

Canvas绘制图形(一)

<img src="https://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>

阅读更多
文章标签: Canvas
个人分类: HTML
上一篇Apache shutdown unexpectedly启动错误解决方法
下一篇Canvas绘制图形图像
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭