<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function draw2D(){
var canvas=document.getElementById("canvas-fram");
if(canvas==undefined){
return ;
}
canvas.width=1000; //设置画布的宽
canvas.height=1000; //设置画布的高
var context=canvas.getContext("2d");
context.moveTo(50, 50);
context.bezierCurveTo(50, 50,200,200,300,50);//绘制曲线,它是由三个坐标点组成,各个坐标点之间会绘制一个弧度
/*
bezierCurveTo(p1x,p1y,p2x,p2y,x,y)
p1x:第一个控制点x坐标
p1y:第一个控制点y坐标
p2x:第二个控制点x坐标
p2y:第二个控制点y坐标
x:终点x坐标
y:终点y坐标
*/
context.stroke();
context.quadraticCurveTo(300, 0, 400,0);//绘制二次曲线,它是由两个坐标点组成的曲线
/*
qpx1:二次曲线控制点x坐标
qpy1:二次样条曲线控制点y坐标
x:二次样条曲线终点x坐标
y:二次样条曲线终点y坐标
*/
context.stroke();
}
</script>
</head>
<body οnlοad="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>
效果图如下所示: