Canvas绘制路径：二次方曲线【每日一段代码11】
<!DOCTYPE HTML>
<html>
<head>
<title>二次方曲线</title>
<script type="text/javascript">
function draw() {
var c = document.getElementById("myCanvas");
if (c.getContext);
{
var cxt = c.getContext("2d");
//Draw shapes
cxt.beginPath();
cxt.moveTo(75,25);
cxt.quadraticCurveTo(25,25,25,62,5);
cxt.quadraticCurveTo(25,100,50,100);
cxt.quadraticCurveTo(50,120,30,125);
cxt.quadraticCurveTo(60,120,65,100);
cxt.quadraticCurveTo(125,100,125,62.5);
cxt.quadraticCurveTo(125,25,75,25);
cxt.stroke();
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="150" height="150" style="border:#000 solid 2px;"></canvas>
</body>
</html>
显示图如下：
【二次方曲线：quadraticCurveTo(cp1x, cp1y, x, y) ，参数 x 和 y 是终点坐标，cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。】
html5
