<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>
显示图如下：
【利用曲线函数绘制心形。】