通过HTML5标签canvas绘制一个八卦图案
2014-08-16 13:27
543 查看
只需要用到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>
相关文章推荐
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点,鼠标抬起点为其中一个顶点
- HTML5 学习手笔三:canvas API 绘制树形图案B
- HTML5 Canvas中实现绘制一个像素宽的细线
- js+html5通过canvas指定开始和结束点绘制线条的方法
- HTML5中canvas知识点详解1-用HTML5绘制一个简单的矩形
- HTML5 在canvas绘制一个矩形
- HTML5 学习手笔二:canvas API 绘制树形图案A
- js+html5通过canvas指定开始和结束点绘制线条的方法
- 通过HTML5 Canvas API绘制弧线和圆形的教程
- html5-canvas标签-绘制矩形
- HTML5教程-用Canvas标签绘制坐标变换图形
- HTML5 Canvas组件绘制太极图案
- HTML5 Canvas中实现绘制一个像素宽的细线
- js+html5实现canvas绘制圆形图案的方法
- HTML5 之Canvas标签学习笔记之二:绘制矩形
- HTML5教程-用Canvas标签绘制矩形
- HTML5教程实例-用Canvas标签绘制圆形
- html5 canvas 标签绘制图像且渐变色处理
- 【实例】html5-canvas通过鼠标绘制线段
- 纯JS+html5新标签canvas绘制与本地时间同步时针