首页 > 代码库 > [转] html5 八卦图
[转] html5 八卦图
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>无标题文档</title><!--下面excanvas.js需下载才能在IE下支持canvas--><!--[if IE]><script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script><script src="http://api.html5media.info/1.1.4/html5media.min.js"></script><script src="http://www.mamicode.com/excanvas.js"></script><![endif]--><script type="text/javascript">window.onload = function(){ var ctx = document.getElementById("pic").getContext(‘2d‘); //绘制白色半圆的代码如下： ctx.beginPath(); ctx.arc(200,200,80,1.5*Math.PI,0.5*Math.PI,false); ctx.fillStyle="white"; ctx.closePath(); ctx.fill(); //绘制黑色半圆的代码如下： ctx.beginPath(); ctx.arc(200,200,80,0.5*Math.PI,1.5*Math.PI,false); ctx.fillStyle="black"; ctx.closePath(); ctx.fill(); //绘制黑色小圆 ctx.beginPath(); ctx.arc(200,240,40,0,Math.PI*2,true); ctx.fillStyle="black"; ctx.closePath(); ctx.fill(); //绘制白色小圆 ctx.beginPath(); ctx.arc(200,160,40,0,Math.PI*2,true); ctx.fillStyle="white"; ctx.closePath(); ctx.fill(); //绘制白色小圆心 ctx.beginPath(); ctx.arc(200,160,5,0,Math.PI*2,true); ctx.fillStyle="black"; ctx.closePath(); ctx.fill(); //绘制黑色小圆心 ctx.beginPath(); ctx.arc(200,240,5,0,Math.PI*2,true); ctx.fillStyle="white"; ctx.closePath(); ctx.fill(); //绘制文字代码如下： ctx.save(); ctx.fillStyle="black"; ctx.globalAlpha="0.4"; ctx.textAlign="center"; ctx.font="32px Arial"; ctx.shadowColor="rgba(0,0,0,0.4)"; ctx.shadowOffsetX=15; ctx.shadowOffsetY=-10; ctx.shadowBlur=2; ctx.fillText(‘Hello Canavs‘,200,100);//IE不支持 ctx.restore();}</script> </head><body> <canvas id="pic" width="400" height="400" style="border:1px solid; background:#E1E1FF;margin:0px auto;display:block;"></canvas> </body> </html>效果：
[转] html5 八卦图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。