当前第2页 返回上一页
实例2：用canvas画一个红的实心圆，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,50,40,0,2*Math.PI);
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();
</script>
</html>
|
fillStyle属性可以设置圆形的颜色，本例将其设置为红色，ctx.fill()将颜色应用于圆形上，效果如图所示：
以上给大家介绍了如何用canvas画圆，比较详细，没有接触过的朋友一定要自己动手尝试，看看自己能不能绘制出圆形，希望这篇文章对你有所帮助！
【相关教程推荐】
1. Html5视频教程
2. JavaScript视频教程
3. bootstrap教程
以上就是图文详解如何用canvas画实心圆和空心圆的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
解决h5网页中用video标签无法播放mp4视频的方法
html5元素拖拽drag与拖放drop相关api的具体介绍（图文）
html5画一个简单呢好看的电路图
html5如何设置文字颜色灰色
html5实现微信播放全屏的方法详解
详细介绍html5使用audio标签实现歌词同步的效果
如何用canvas绘制矩形？canvas画矩形的两种方法介绍
震惊！html5区块链游戏联盟成立，设立10亿级发展基金！
html5中的强制下载属性download使用
微信html5页面如何调用第三方位置导航
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 图文详解如何用canvas画实心圆和空心圆
