Canvas画圆

最新推荐文章于 2024-01-15 11:50:28 发布

aphy358

最新推荐文章于 2024-01-15 11:50:28 发布

阅读量1.3k

点赞数

分类专栏： Javascript Web前端 HTML5 文章标签： Canvas 画圆

本文链接：https://blog.csdn.net/aphy358/article/details/50071503

版权

Web前端同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

Javascript

38 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

Canvas画圆方法如下：

<body style="background-color: #DDE99D;">
    <canvas id="myCanvas" width="300px" height="300px" style=" border: 1px solid black;">您的浏览器不支持canvas标签。
    </canvas>

    <script>
        //获取Canvas对象(画布)
        var canvas = document.getElementById("myCanvas");
        //检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
        if (canvas.getContext) {
            //获取对应的CanvasRenderingContext2D对象(画笔)
            var ctx = canvas.getContext("2d");

            //开始一个新的绘制路径
            ctx.beginPath();

            //设置弧线的颜色为红色
            ctx.strokeStyle = "red";

            //沿着坐标点(100,75)为圆心、半径为50px的圆的顺时针方向绘制
            ctx.arc(100, 75, 50, 0, 2 * Math.PI);

            //按照指定的路径绘制弧线
            ctx.stroke();
        }
    </script>
</body>

注意：width和height不要写到style里面去，不然画的圆可能是个椭圆。

aphy358

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas画圆

Canvas画圆方法如下：您的浏览器不支持canvas标签。 //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if
复制链接

扫一扫