Canvas绘制路径：贝塞尔曲线【每日一段代码12】

<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");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.moveTo(75,40);
cxt.bezierCurveTo(75,37,70,25,50,25);
cxt.bezierCurveTo(20,25,20,62.5,20,62.5);
cxt.bezierCurveTo(20,80,40,102,75,120);
cxt.bezierCurveTo(110,102,130,80,130,62.5);
cxt.bezierCurveTo(130,62.5,130,25,100,25);
cxt.bezierCurveTo(85,25,75,37,75,40);
cxt.fill();
}
}
</script>
<body onLOad="draw()">
<canvas id="myCanvas" width="150" height="150" style="border:#06f 2px solid;"></canvas>
</body>
</html>

 

显示图如下：

【利用曲线函数绘制心形。】

posted on 2012-02-05 16:18  Cosimo  阅读(384)  评论(0)    收藏  举报

导航