HTML5 Canvas Quadratic Curve 教程

HTML5 Canvas Quadratic Curve Tutorial

在html5 canvas上画一个quadratic曲线，我们可以使用quadraticCurveTo()方法。Quadratic曲线定义了一个context点，控制点和结束点。

1	context. quadraticCurveTo (controlX ,controlY ,endX ,endY ) ;

window.onload = function(){
var canvas = document.getElementById(“mycanvas”);
var context = canvas.getContext(“2d”);

context.moveTo(188,150);//context point
//control point
var controlX = 288;
var controlY = 0;
//ending point
var endX = 388;
var endY = 150;

context.quadraticCurveTo(controlX,controlY,endX,endY);

context.lineWidth = 10;
context.strokeStyle = “black”;
context.stroke();

}

HTML5 Canvas Arc 说明

看上面的图解。一个控制点通过创建两条切线去连接内容点和结束点定义二次曲线的曲度。内容点通过使用moveTo方法定义。移动
控制点离context点和ending点会创建更圆滑的曲线，移动控制点离context点和ending点会创建更弯曲的曲线。

转载于http://www.balingke.com/archives/714.html#more