首页 > 代码库 > 通过HTML5标签canvas绘制一个八卦图案
通过HTML5标签canvas绘制一个八卦图案
只需要用到casvas标签和fillStyle、arc、beginPath、closePath、fill方法
代码如下：
<canvas id="rect" width="310" height="310" style="border:1px yellow solid;"> </canvas> <script> var id=document.getElementById("rect"); var context= id.getContext("2d"); context.fillStyle="#AAAAAA"; context.fillRect(0,0,310,310); context.fillStyle="#FFFFFF"; context.beginPath(); context.arc(155,155,150,Math.PI/2,Math.PI*3/2,true); context.closePath(); context.fill(); context.fillStyle="#000000"; context.beginPath(); context.arc(155,155,150,Math.PI/2,Math.PI*3/2,false); context.closePath(); context.fill(); context.beginPath(); context.arc(155,230,75,Math.PI/2,Math.PI*3/2,true); context.closePath(); context.fill(); context.fillStyle="#FFFFFF"; context.beginPath(); context.arc(155,80,75,Math.PI/2,Math.PI*3/2,false); context.closePath(); context.fill(); context.beginPath(); context.arc(155,230,15,0,Math.PI*2,false); context.closePath(); context.fill(); context.fillStyle="#000000"; context.beginPath(); context.arc(155,80,15,0,Math.PI*2,false); context.closePath(); context.fill(); </script>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。