Canvas绘制图形（一）

最新推荐文章于 2022-04-20 14:42:30 发布

happyChen2016

最新推荐文章于 2022-04-20 14:42:30 发布

阅读量401

点赞数

分类专栏： HTML 文章标签： Canvas

本文链接：https://blog.csdn.net/liwb1987/article/details/46809345

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<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 οnlοad="draw('canvasid')">
    <canvas id="canvasid" width="300" height="400"></canvas>
</body>
</html>

happyChen2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas绘制图形（一）

function draw(id) { var canvas = document.getElementById(id); var context = canvas.getContext("2d"); context.fillStyle = "#eeeeef"; context.fill
复制链接

扫一扫

专栏目录