• 俊硕博客公告栏:深圳俊硕专注于SEO优化培训,免费给深圳SEO爱好者提供SEO技术培训教程,兼深圳地区公司网站排名优化等服务!

HTML教程:基于html5绘制圆形多角图案

哈喽,大家好我是深圳SEO俊硕我们先看看最简单的效果图:

HTML教程:基于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);

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

HTML教程:基于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.         x3 = (r – x2) /2+ x2 +10+ Math.random() *20;
  24.         y3 = y2 /2;
  25.         ctx.lineTo(x3,y3);
  26.         ctx.lineTo(x2,y2);
  27.       }
  28.       ctx.fill();
  29.       ctx.restore();
  30.       r <=100&& (r +=2);
  31.    },100);

深圳SEO俊硕总结:以上就是本文的全部内容,希望对大家的学习有所帮助。


深圳SEO俊硕博客申明版权隶属:深圳SEO(http://www.junsuk.com/)

转载请注明:深圳SEO俊硕博客 » HTML教程:基于html5绘制圆形多角图案

喜欢 (1)
支付宝[]
分享 (0)
俊硕博主
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到