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

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

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

代码如下:

 
 
 
 
 
 
 
原文
 
 
 
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画布绘制贝塞尔曲线”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！