html5中文学习网

您的位置: 首页?>?html5二元倍投表?>?入门二元倍投表 ? 正文

基于html5绘制圆形多角图案_html5二元倍投表技巧

[ ] 已经帮助:人解决问题

先看看最简单的效果图:hHNHTML5中文学习网 - HTML5先行者学习网

hHNHTML5中文学习网 - HTML5先行者学习网

代码如下:hHNHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板
  1. var?canvas?=?document.getElementById('my'),?ctx?=?canvas.getContext('2d'); ??
  2.   setInterval(function(){ ??
  3.     ctx.clearRect(0,0,400,400); ??
  4.     ctx.save(); ??
  5.    ?ctx.translate(200,200); ??
  6.     var?ci?=90,?pi?=?Math.PI?/?ci,?x1?=?100,?y1?=0,?x2?=0,?y2?=0,?x3?=0,?y3?=0; ??
  7.     ctx.beginPath(); ??
  8.     for(var?i?=?ci?*2;?i?>0;?i--){ ??
  9.    ?  ctx.rotate(pi); ??
  10.       ctx.moveTo(x1,y1); ??
  11.       y2?=?x1?*?Math.sin(pi); ??
  12.       x2?=?x1?*?Math.cos(pi); ??
  13.       x3?=?(x1?-?x2)?/2+?x2?+10+?Math.random()?*20; ??
  14.       y3?=?y2?/2; ??
  15.       ctx.lineTo(x3,y3); ??
  16.       ctx.lineTo(x2,y2); ??
  17.     } ??
  18.    ?ctx.stroke(); ??
  19.     ctx.restore(); ??
  20.   },100);??

hHNHTML5中文学习网 - HTML5先行者学习网
在上面多角形的基础上进一步之后为:hHNHTML5中文学习网 - HTML5先行者学习网

hHNHTML5中文学习网 - HTML5先行者学习网

代码如下:hHNHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板
  1. var?canvas?=?document.getElementById('my'),?ctx?=?canvas.getContext('2d'),?r?=10; ??
  2. ??  setInterval(function(){ ??
  3. ??    ctx.clearRect(0,0,400,400); ??
  4. ??    ctx.save(); ??
  5. ?    ?ctx.translate(200,200); ??
  6. ??    var?grad?=?ctx.createRadialGradient(0,0,0,0,0,r+20); ??
  7. ?    ?grad.addColorStop(0.2,'white'); ??
  8. ?    ?grad.addColorStop(0.7,'yellow'); ??
  9.    ???grad.addColorStop(0.8,'orange'); ??
  10. ?    ?ctx.beginPath(); ??
  11.     ??ctx.fillStyle?=?grad; ??
  12.     ??ctx.arc(0,0,r,0,Math.PI*2,true); ??
  13.     ??ctx.fill(); ??
  14.     var?ci?=90,?pi?=?Math.PI?/?ci,?x2?=0,?y2?=0,?x3?=0,?y3?=0; ??
  15. ?    ?x1?=100; ??
  16. ??    y1?=0; ??
  17. ??    ctx.beginPath(); ??
  18. ??    for(var?i?=?ci?*2;?i?>0;?i--){ ??
  19. ??      ctx.rotate(pi); ??
  20. ??      ctx.moveTo(r,0); ??
  21. ??      y2?=?r?*?Math.sin(pi); ??
  22. ??      x2?=?r?*?Math.cos(pi); ??
  23. ??
  24. ??      x3?=?(r?-?x2)?/2+?x2?+10+?Math.random()?*20; ??
  25. ??      y3?=?y2?/2; ??
  26. ??
  27. ??      ctx.lineTo(x3,y3); ??
  28. ??      ctx.lineTo(x2,y2); ??
  29. ??    } ??
  30. ??    ctx.fill(); ??
  31. ??    ctx.restore(); ??
  32. ??    r?<=100&&?(r?+=2); ??
  33. ?  },100); ??
  34. ??

以上就是本文的全部内容,希望对大家的学习有所帮助。hHNHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助