网站建设资讯

NEWS

网站建设资讯

怎么用html5的canvas画布绘制贝塞尔曲线-创新互联

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

成都创新互联公司专注于企业营销型网站建设、网站重做改版、玉环网站定制设计、自适应品牌网站建设、H5响应式网站商城网站建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为玉环等各大城市提供网站开发制作服务。

代码如下:

 
 
 
用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画布绘制贝塞尔曲线-创新互联
本文URL:http://njwzjz.com/article/cccggi.html