用火狐的話要先定義gradient,不然沒反應
context.gradient=context.createRadialGradient(200,200,50,200,200,20);
var gradient=context.gradient;
gradient.addColorStop(0,"#0A0A0A");
gradient.addColorStop(1,"#636766");
context.gradient=context.createRadialGradient(200,200,50,200,200,20);
var gradient=context.gradient;
gradient.addColorStop(0,"#0A0A0A");
gradient.addColorStop(1,"#636766");
這里棋盤線寬度顏色不對的原因:沒有設lineWidth所以默認寬度為1px,canvas繪制線條,線條的寬度是以線條的中線向兩邊延伸確定的。拿moveTo(15,435),lineTo(435,435)這條線來說,實際上繪制時y軸的區域是(434.5,435.5),但瀏覽器不允許小于1px的圖形,所以瀏覽器處理時虛化,最終繪制的y軸區域是(434,436),線的寬度就成了2px,顏色變淺。這里左上部分比右下部分顏色深應該是瀏覽器自行處理的結果。要保證正確的寬度和顏色,可以使用0.5大法,xy同時左移或右移0.5.參考網址:http://www.jb51.net/html5/70312.html