html 5 canvas 在線繪圖體驗

(繪圖區尺寸，寬 300px 高 300px)

(function(){
var ctx = document.getElementById('paintZone').getContext('2d');
/*加入形狀剪裁*/

/*加背景*/

/*加花圖*/

/**/
})();

漸層背景 (複製，應以純文字貼上)

var lingrad = ctx.createLinearGradient(150,0,150,150);
lingrad.addColorStop(0,'#eb0');
lingrad.addColorStop(1,'#007');
ctx.fillStyle = lingrad;
ctx.fillRect(0,0,300,300);

萬花筒 (複製，應以純文字貼上)

ctx.save();
ctx.strokeStyle = "#ff66ee";
ctx.translate(150,150);
drawSpirograph(ctx,148,-64,30);
ctx.restore();
function drawSpirograph(ctx,R,r,O){
 var x1 = R-O;
 var y1 = 0;
 var i  = 1;
 ctx.beginPath();
 ctx.moveTo(x1,y1);
 do {
  if (i>20000) break;
  var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
  var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
  ctx.lineTo(x2,y2);
  x1 = x2;
  y1 = y2;
  i++;
 } while (x2 != R-O && y2 != 0 );
 ctx.stroke();
}

形狀剪裁 | 遮色片 (複製，應以純文字貼上)

ctx.beginPath();
ctx.moveTo(150,75);
ctx.bezierCurveTo(142,30,24,-20,4,80);
ctx.bezierCurveTo(-16,200,100,225,150,298);
ctx.bezierCurveTo(200,225,316,200,296,80);
ctx.bezierCurveTo(276,-20,158,30,150,75);
ctx.clip();