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

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

HTML教程 AG8游戏博主 7次浏览 已收录 0个评论 扫描二维码

哈喽,大家好我是深圳SEOAG8游戏我们先看看最简单的效果图:

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

代码如下:

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

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

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

代码如下:

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

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


深圳SEOAG8游戏博客申明版权隶属:深圳SEO(/)

转载请注明:深圳SEOAG8游戏博客 HTML教程:基于html5绘制圆形多角图案

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