<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>贝塞尔法画桃心</title> </head> <body> <canvas id="mycavas" width="300" height="300" > </canvas> <script type="application/javascript" > var canvas = document.getElementById("mycavas"); var context = canvas.getContext("2d"); context.beginPath(); context.fillStyle="#c00"; context.moveTo(75,40) //左半边的桃心，从凹进去的地方开始画 context.bezierCurveTo(75,37,70,25,50,25); context.bezierCurveTo(20,25,20,62.5,20,62.5); context.bezierCurveTo(20,80,40,102,75,120); //右半边的桃心，从桃心尖尖部分开始画 context.bezierCurveTo(110,102,130,80,130,62.5); context.bezierCurveTo(130,62.5,130,25,100,25); context.bezierCurveTo(85,25,75,35,75,40); context.stroke(); context.fill(); </script> </body> </html>
效果图：
