參考
知識點
不同于SVG脐恩，HTML中的元素canvas只支持一種原生的圖形繪制：矩形。所有其他的圖形的繪制都至少需要生成一條路徑
繪制矩形的方法
繪制填充的矩形
fillRect(x, y, width, height);
繪制一個矩形的邊框
strokeRect(x,y,width,height);
清除指定矩形區(qū)域采蚀，讓清除部分完全透明
clearRect(x,y,width,height);
參數(shù)說明：
x：繪制圖形左上角（起點）的橫坐標(biāo)；
y：繪制圖形左上角（起點）的縱坐標(biāo)惩猫；
width：繪制圖形的寬查牌；
height：繪制圖形的高；
案例
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvas1');
if (canvas.getContext) {
var oContext = canvas.getContext('2d');
// 繪制一個尺寸是200px*200px的矩形
oContext.fillRect(50, 50, 200, 200);
// 擦除一個尺寸是180*180的矩形
oContext.clearRect(60, 60, 180, 180);
// 在擦除區(qū)域生成一個尺寸是140*140的邊框
oContext.strokeRect(80, 80, 140, 140);
}
}
結(jié)果.png
注意：這三個方法繪制后會馬上顯示在畫布上荆虱，即是實時顯示的掉分；
