<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 绘制二次曲线</title>
<script>
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.lineWidth=10;
context.strokeStyle="red";
context.moveTo(100,canvas.height-50);
context.quadraticCurveTo(canvas.width/2,-50,canvas.width-100,canvas.height-50);
context.stroke();
}
</script>
</head>
<body style="margin:100px 50px;">
<canvas id="myCanvas" width="600" height="250" style="border:#06f solid 2px;"></canvas>
</body>
</html>
显示效果如下：
本实例来自网络。传送门：http://demo.cnmsdn.com/demo36.html