绘制线段 context.moveTo(x,y)  context.lineTo(x,y)

x:x坐标

y:y坐标

每次画线都从moveTo的点到lineTo的点，

如果没有moveTo那么第一次lineTo的效果和moveTo一样，

每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点

代码如下：

function draw1(id) {
            var canvas = document.getElementById(id);
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#EEEEFF";
            context.fillRect(0, 0, 400, 300);
            var n = 0;
            var dx = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.fillStyle = 'rgb(100,255,100)';
            context.strokeStyle = 'rgb(0,0,100)';
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 15 * 11;
            for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.fill(); context.stroke(); }

效果如下：

绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

cp1x:第一个控制点x坐标

cp1y:第一个控制点y坐标

cp2x:第二个控制点x坐标

cp2y:第二个控制点y坐标

x:终点x坐标

y:终点y坐标

qcpx:二次样条曲线控制点x坐标

qcpy:二次样条曲线控制点y坐标

qx:二次样条曲线终点x坐标

qy:二次样条曲线终点y坐标

代码如下：

function draw2(id) {
            var canvas = document.getElementById(id);
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext("2d");
            context.fillStyle = "#EEEFF";
            context.fillRect(0, 0, 400, 300);
            var n = 0;
            var dx = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.globalCompositeOperation = 'and';
            context.fillStyle = 'rgb(100,255,100)';
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 15 * 11;
            context.moveTo(dx, dy);
            for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s); } context.closePath(); context.fill(); context.stroke(); }

效果如下:

ps: 一朵扭曲的绿色菊花...菊花你懂的