网站建设资讯

NEWS

网站建设资讯

怎么用html5的canvas画布绘制贝塞尔曲线

这篇文章主要介绍“怎么用html5的canvas画布绘制贝塞尔曲线”,在日常操作中,相信很多人在怎么用html5的canvas画布绘制贝塞尔曲线问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用html5的canvas画布绘制贝塞尔曲线”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联公司专业为企业提供王屋网站建设、王屋做网站、王屋网站设计、王屋网站制作等企业网站建设、网页设计与制作、王屋企业网站模板建站服务,10年王屋做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

代码如下:

 
 
 
用html5的canvas画布绘制贝塞尔曲线 
 
 
  原文
      function draw(id)  {  var canvas=document.getElementById(id);  if(canvas==null)  return false;  var context=canvas.getContext('2d');  context.fillStyle="#eeeeff";  context.fillRect(0,0,400,300);  var n=0;  var dx=150;  var dy=150;  var s=100;  context.beginPath();  context.globalCompositeOperation='and';  context.fillStyle='rgb(100,255,100)';  context.strokeStyle='rgb(0,0,100)';  var x=Math.sin(0);  var y=Math.cos(0);  var dig=Math.PI/15*11;  for(var i=0;i<30;i++)  {  var x=Math.sin(i*dig);  var y=Math.cos(i*dig);  context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);  }  context.closePath();  context.fill();  context.stroke();  }  draw("keleyi_com");     

到此,关于“怎么用html5的canvas画布绘制贝塞尔曲线”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


文章标题:怎么用html5的canvas画布绘制贝塞尔曲线
文章出自:http://cdweb.net/article/ijjihs.html