当前第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新增标签与属性使用方法归纳
html5和flash的区别有哪些
html5实现一个简单的在线画板
html5 canvas绘制五角星的方法
html5实现留言和回复的页面样式
h5本地存储实例详解
canvas实现雪花随机动态飘落效果（代码示例）
h5的移动端适配怎样实现
h5的localstorage如何在本地存储刷新值
详解html5的限制验证
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 图文详解如何用canvas画实心圆和空心圆
