<font color="#000"><font face="Tahoma, Arial, Helvetica, snas-serif">要创建一个HTML5的画布——贝塞尔曲线,我们可以使用bezierCurveTo()方法。Bezier曲线定义点有两个控制点和一个结束点。与二次曲线相比,Bezier曲线定义有两个控制点,而不是一个,使您能够创建更复杂的曲线。</font></font><br> <font color="#000"><font face="Tahoma, Arial, Helvetica, snas-serif">具体代码如下:</font></font><br> <br> <p align="center"><font style="color:rgb(0, 0, 0)"><font face="Tahoma, Arial, Helvetica, snas-serif"><img id="_aimg_2584" aid="2584" zoomfile="data/attachment/forum/201205/07/11141157z5ktpy5cmtfk7k.jpg" src="data/attachment/forum/201205/07/11141157z5ktpy5cmtfk7k.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" style="max-width:90%" alt="bezier-1.jpg" title="bezier-1.jpg" w="224"></font></font></p> <br> <div class="blockcode"> <div id="code_NoQ"><ol><li>context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);</li></ol></div> <em onclick="copycode($('code_NoQ'));">复制代码</em> </div> <font face="Tahoma, Arial, Helvetica, snas-serif"><font color="#000000"><br> </font></font><font face="Tahoma, Arial, Helvetica, snas-serif"><font color="#000000">案例的JavaScript代码:</font></font><br> <br> <div class="blockcode"> <div id="code_Ilf"><ol> <li>window.onload = function(){<br> </li> <li> var canvas = document.getElementById("myCanvas");<br> </li> <li> var context = canvas.getContext("2d");<br> </li> <li> context.moveTo(188, 130);<br> </li> <li> var controlX1 = 140;<br> </li> <li> var controlY1 = 10;<br> </li> <li> var controlX2 = 388;<br> </li> <li> var controlY2 = 10;<br> </li> <li> var endX = 388;<br> </li> <li> var endY = 170;<br> </li> <li> context.bezierCurveTo(controlX1, controlY1, controlX2<br> </li> <li> controlY2, endX, endY);<br> </li> <li> context.lineWidth = 10;<br> </li> <li> context.strokeStyle = "black"; // line color<br> </li> <li> context.stroke();<br> </li> <li>};</li> </ol></div> <em onclick="copycode($('code_Ilf'));">复制代码</em> </div> <br> <br> <font face="Tahoma, Arial, Helvetica, snas-serif"><font color="#000000">关于为什么要使用这些代码,我们用一张图片来解释一下:</font></font><br> <br> <p align="center"><img id="_aimg_2585" aid="2585" zoomfile="data/attachment/forum/201205/07/111411uzxoopml2ruulrun.jpg" src="data/attachment/forum/201205/07/111411uzxoopml2ruulrun.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" style="max-width:90%" alt="bezier-2.jpg" title="bezier-2.jpg" w="570"></p> <br> <br> <font face="Tahoma, Arial, Helvetica, snas-serif"><font color="#000000">贝塞尔曲线的定义是由当前的上下文和两个控制点以及结束点控制的。曲线的第一部分是切向的假想线,是由上下文点和第一个控制点定义。第二部分的曲线相切的假想线,是第二个控制点和结束点定义。</font></font><br> <br> <br> <br> <font color="#000"><font face="Tahoma, Arial, Helvetica, snas-serif">转自<a href="http://www.52maomao.info/html5-canvas-bezier-curve.html" target="_blank">我爱猫猫技术博客</a></font></font><br> <br>