Canvas是HTML5標準中新增的一個元素,通過JavaScript編程實現在網頁上繪制圖形、動畫和游戲等。
使用Canvas可以實現非常豐富的視覺效果,但有時候我們發現在CSS文件中修改Canvas的樣式卻不起作用。
canvas {
width: 500px;
height: 500px;
border: 1px solid black;
}
上面的代碼是給Canvas設置寬度、高度以及邊框,但是在實際運行時并沒有任何效果。
這是因為Canvas是一個通過JavaScript動態繪制的元素,CSS樣式對其并沒有任何作用。想要修改Canvas的樣式,需要直接在JavaScript中操作:
var canvas = document.getElementById("myCanvas");
canvas.style.width = "500px";
canvas.style.height = "500px";
canvas.style.border = "1px solid black";
通過以上代碼,我們成功的給Canvas設置了樣式。
因此,在操作Canvas樣式時,我們需要注意,CSS樣式對其無效,只能通過JavaScript操作。