html5的canvas 畫西瓜

這幾天在學HTML5，練習canvas畫了半個西瓜。

畫的西瓜分爲“瓜子”，“瓜肉”，“白瓜肉”，“瓜皮”。

效果圖：

注意的地方是：

1.瓜肉與瓜皮之間有白色瓜肉，使用 stroke() 方法，但直接畫上白色會顯得死板，所以給 stroke() 設置樣式爲漸變色（紅-白-綠）。

2.瓜子是一個扇形，畫扇形需使用arc()方法創建弧/曲線，還需moveTo()方法把路徑移動到畫布中的指定點（即圓心）。

3.多個瓜子的創建需使用旋轉——rotate()方法。具體請看 drawseeds(ctx,spin)函數。

HTML：

<canvas id="canv" width="800px" height="800px">
    你的瀏覽器不支持 canvas
</canvas>

JavaScript：

window.onload=function(){
	canvasdraw();//半圓
}
function canvasdraw(){
	var canvas=document.getElementById("canv");
	if(!canvas.getContext) return;//檢測支持性
	var ctx=canvas.getContext('2d');//獲得 2d 上下文對象
	//繪製圖形
	
	//瓜子
	ctx.translate(150, 140); //一定座標原點到原來的中心
    drawseeds(ctx,5);//大瓜子
    drawseeds(ctx,3);//小瓜子 	
	ctx.globalCompositeOperation="destination-over";//使瓜子不被瓜肉遮擋
	ctx.translate(-150, -140); //一定座標原點到原來的中心
	
	//瓜肉
    ctx.beginPath();
    ctx.arc(150, 150,130, 0, Math.PI, false);
	ctx.fillStyle = "rgb(240,23,65)";
    ctx.fill();
	
	//瓜肉和皮之間
	// 創建漸變
	var grd=ctx.createRadialGradient(150,150,130,150,150,140);
	grd.addColorStop(0,"rgb(240,23,65)");
	grd.addColorStop(0.5,"rgb(250,230,250)");
	grd.addColorStop(1,"rgb(140,203,65)");
	// 填充漸變
	ctx.strokeStyle=grd;
	ctx.lineWidth = 20;//線寬
    ctx.stroke();
	
	//瓜皮
	ctx.beginPath();
	ctx.strokeStyle = "rgb(140,203,65)";
	ctx.arc(150,150,140,0,Math.PI);
	ctx.lineWidth = 10;//線寬
	ctx.stroke();
}

//瓜子
function drawseeds(ctx,spin){//spin:瓜子個數
	var pi = Math.PI;
	for (var i = 0; i <spin; i++){//繪製瓜子spin
        ctx.save();
        ctx.rotate(pi/(2*spin) + i * pi /spin);  //旋轉座標
        ctx.beginPath();
        ctx.moveTo(20*spin, 0);
		ctx.arc(20*spin, 0,4*spin,1/8*Math.PI,-1/8*Math.PI,true);
		ctx.fill();
        ctx.restore();
    }
}