简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary

Home  >  Article  >  Web Front-end  >  基于html5绘制圆形多角图案_html5教程技巧

基于html5绘制圆形多角图案_html5教程技巧

WBOY
WBOYOriginal
2016-05-23 14:20:071615browse

先看看最简单的效果图：

代码如下：

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);  


在上面多角形的基础上进一步之后为：

代码如下：

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 
  33.  　　},100);   
  34.   

以上就是本文的全部内容，希望对大家的学习有所帮助。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5中对contenteditable属性的解释与规定Next article：浅析border-radius如何兼容IE_html5教程技巧

Related articles

See more