HTML5学习(2) canvas标签的使用四

最新推荐文章于 2022-06-14 21:50:14 发布

Symbol

最新推荐文章于 2022-06-14 21:50:14 发布

阅读量1k

点赞数

分类专栏： HTML5 文章标签： html5 border

本文链接：https://blog.csdn.net/wcf_szkingdom/article/details/7877967

版权

HTML5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<head>
</head>
<body>
    <canvas width="200px" height="200px" id="myCanvas" style="border:3px solid #00FF00"></canvas>
    <script type="text/javascript">
        var obj = document.getElementById("myCanvas");
        var cxt = obj.getContext("2d");
        cxt.fillStyle = "#FF0000";
        <!-- beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0) -->
        cxt.beginPath();
        <!-- arc(x, y, radius, startAngle, endAngle, counterclockwise)radius:半径 Angle:沿着圆指定弧的开始点和结束点的一个角度 counterclockwise:顺时针绘制)-->       
        cxt.arc(70,18,15,0,Math.PI*2,true);
        <!-- 结束当前路径 -->
        cxt.closePath();
        <!-- fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径 -->
        cxt.fill(); 
    </script>
</body>

心得:

绘制圆:

arc();

Symbol

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习(2) canvas标签的使用四

var obj = document.getElementById("myCanvas"); var cxt = obj.getContext("2d"); cxt.fillStyle = "#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,M
复制链接

扫一扫