简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> H5 Tutorial> body text

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

WBOY
Release： 2016-05-23 14:20:07
Original
1647 people have browsed it

先看看最简单的效果图：

代码如下：

JavaScript Code 复制内容到剪贴板
  1. varcanvas = 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. varci =90, pi = Math.PI / ci, x1 = 100, y1 =0, x2 =0, y2 =0, x3 =0, y3 =0;
  7. 　　　　ctx.beginPath();
  8. for(vari = 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. varcanvas = 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. vargrad = 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. varci =90, pi = Math.PI / ci, x2 =0, y2 =0, x3 =0, y3 =0;
  15. 　　　　 x1 =100;
  16. 　　　　y1 =0;
  17. 　　　　ctx.beginPath();
  18. for(vari = 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);
  24. 　　　　　　x3 = (r - x2) /2+ x2 +10+ Math.random() *20;
  25. 　　　　　　y3 = y2 /2;
  27. 　　　　　　ctx.lineTo(x3,y3);
  28. 　　　　　　ctx.lineTo(x2,y2);
  29. 　　　　}
  30. 　　　　ctx.fill();
  31. 　　　　ctx.restore();
  32. 　　　　r
  33. 　　},100);

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

Related labels：
html5 round
source：php.cn
Previous article：HTML5中对contenteditable属性的解释与规定 Next article：浅析border-radius如何兼容IE_html5教程技巧
Statement of this Website
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
Latest Articles by Author
Latest Issues
How to set HTML5's required attribute using Javascript? I'm trying to mark a text input box as required in Javascript.
From 2023-10-13 08:52:25
0
2
317
Problem with not getting accurate mouse coordinates: using HTML5 canvas when resizing the page I want to create this pixel effect from a front-end expert. Although I can achieve the ent...
From 2023-09-12 12:20:33
0
1
280
HTML5 video M3U8 encoded with Base64 I want to add a base64 encoded M3U8 file in the Video tag of HTML5, how can I do it
From 2023-09-09 23:07:18
0
1
247
vue.js/bootstrap: onclick event method not called, error "Variable not found: updateDocument" I'm new to front-end development but have basic understanding of HTML5, CSS and Javascript...
From 2023-09-09 20:06:48
0
1
362
Remove closing slash '/' from image tag in XHTML I have a string txt1 that stores an image. Its value is in XHTML format, i.e. the element ...
From 2023-09-06 12:15:38
0
1
240
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！