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 是第二个的。】

posted on 2012-02-05 12:54  Cosimo  阅读(297)  评论(0)    收藏  举报

导航