使用html5绘制比较复杂的图形!–带角的圆形

使用html5绘制比较复杂的图形!–带角的圆形!~ 看着还是挺不错的

输入代码:

———————————————————————————————————-

<!DOCTYPE HTML> <html> <head> <title>使用html5绘制比较复杂的图形!</title>

<script> function draw(){ var canvas=document.getElementById(“my”); var context=canvas.getContext(“2d”); //保存当前的绘画状态 context.fillStyle=”#eeeeff”; context.fillRect(0,0,400,300); var n=0; var dx=150; var dy=150; var s=100; context.beginPath(); context.fillStyle=’rgb(100,255,100)’; context.strokeStyle=’rgb(0,0,100)’; var x=Math.sin(0); var y=Math.cos(0); var dig=Math.PI/15*11; for (var i=0;i<30 ;i++ ){ var x=Math.sin(i*dig); var y=Math.cos(i*dig); context.lineTo(dx+x*s,dy+y*s); } context.closePath(); context.fill(); context.stroke(); }

window.addEventListener(“load”,draw,true); </script> </head>

<body> <center> 使用html5绘制比较复杂的图形!~<br/><br/> <h1><a href=”http://www.yugaga.com”><font color=”green”>记住我们娱嘎嘎</font></a><h1> <canvas id=”my” width=”300″ height=”300″ style=”border:solid 1px red;”></canvas> <center> </body> </html>

——————————————————————————————————————-

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/fuzatuxing.htm

 

共有 0 条评论

Top