html5贝塞尔,使用HTML5画布绘制贝塞尔曲线

是的，请使用HTML canvasbezierCurveTo()方法在HTML5中绘制Bezier曲线。

示例

您可以尝试运行以下代码以使用画布绘制贝塞尔曲线：HTML>

#test {

width: 100px;

height:100px;

margin: 0px auto;

}

function drawShape(){

//使用DOM获取canvas元素

var canvas = document.getElementById('mycanvas');

//确保不支持画布时不执行

if (canvas.getContext){

//使用getContext使用画布进行绘制

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.moveTo(75,40);

ctx.bezierCurveTo(75,37,70,25,50,25);

ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

ctx.bezierCurveTo(20,80,40,102,75,120);

ctx.bezierCurveTo(110,102,130,80,130,62.5);

ctx.bezierCurveTo(130,62.5,130,25,100,25);

ctx.bezierCurveTo(85,25,75,37,75,40);

ctx.fill();

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

}