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

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

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

代码如下:

 
 
 
 
 
 
 
原文
 
 
 
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://6mz.cn/article/cccggi.html