canvas绘图——贝塞尔曲线
canvas绘图——贝塞尔曲线<div class="postText"><div id="cnblogs_post_body">1、二次贝塞尔曲线
quadraticCurveTo(cpx,cpy,x,y) //cpx，cpy表示控制点的坐标, x，y表示终点坐标；
数学公式表示如下：
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：
http://upload.wikimedia.org/wikipedia/zh/math/f/7/f/f7feec578897a3dea09ce670a2791d5a.png
http://pic002.cnblogs.com/images/2012/436120/2012101521323283.gif
代码实例：
<div class="cnblogs_code"><!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas直线</title><meta name="Keywords" content=""><meta name="Description" content=""><style type="text/css"> body, h1{margin:0;} canvas{margin: 20px;}</style></head><body onload="draw()"> <h1>二次贝塞尔曲线</h1> <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas><script> function draw() { var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); //绘制起始点、控制点、终点 context.beginPath(); context.moveTo(20,170); context.lineTo(130,40); context.lineTo(180,150); context.stroke(); //绘制2次贝塞尔曲线 context.beginPath(); context.moveTo(20,170); context.quadraticCurveTo(130,40,180,150); context.strokeStyle = "red"; context.stroke(); }</script></body></html>
页:
[1]