This is canvas by guoshuang!

canvas = document.getElementById("canvas-bezier");
ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
ctx.strokeStyle = "#c00";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.bezierCurveTo(10,150,200,100,310,10);
ctx.stroke();

ctx.moveTo(10,10); //从 10,10 开始画

ctx.bezierCurveTo(10,150,200,100,310,10); //10,150 是第一个贝赛尔控制点（左面的绿点），200,100 第二个控制点（右面绿点）,310,10 是终点。

笔记

• canvas 不能直接 style 设置高宽，会变形。直接 width height=
• canvas 没有 zindex，上面的后画；或者多个 canvas position:absolute
• quadraticcurveto 中间只有一个控制点。类似于 flash 中拖线；
• dotted stroke in canvas 垂直线的时候可能不显示（正好在缝隙中）
• select by id 或者 rapheal

参考：

• html5canvastutorials
• Canvas Bézier Curve Example
• w3schools canvas_beziercurveto