标签：
//贝塞尔二次曲线的实例：http://tinyurl.com/html5quadratic
//贝塞尔3次曲线的实例：http://tinyurl.com/html5bezier
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>starGirl</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style> </head> <body> <div> <canvas id = "canvas" width = "800px" height = "600px"></canvas> </div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById(‘canvas‘).getContext(‘2d‘)
//贝塞尔二次曲线的实例：http://tinyurl.com/html5quadratic
canvas.height=800;
canvas.width=800;
context.strokeStyle=‘red‘;
context.lineWidth=3;
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(300,250,500,100);
context.stroke();
context.moveTo(100,100);
context.quadraticCurveTo(300,450,500,100);
context.stroke();
context.closePath();
//贝塞尔3次曲线的实例：http://tinyurl.com/html5bezier
context.lineWidth = 6;
context.strokeStyle = "#333";
context.beginPath();
context.moveTo(400, 276);
context.bezierCurveTo(180, 60, 246, 343, 71, 236);
context.stroke();
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/vs1435/p/5480898.html
