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

最新推荐文章于 2024-10-31 10:41:30 发布

原创最新推荐文章于 2024-10-31 10:41:30 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #border

HTML5 专栏收录该内容

18 篇文章

订阅专栏

本文通过一个简单的HTML5 Canvas示例展示了如何使用JavaScript绘制一个红色的圆形。利用arc()方法定义圆形路径，并通过fill()方法填充颜色。

<!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();