通過Html設置畫布大小。您可以直接在Html頁面上設置Canvas元素的大小:
& ltcanvas id = " test canvas " width = " 200 " height = " 100 " >& lt/canvas & gt；
也可以通過js設置畫布大小:
var canvas = document . getelementbyid(" test canvas ")；
畫布.寬度= 200；
帆布.高度= 100；
兩種方法都可以。
需要註意的是，設置好畫布大小後，畫布的所有樣式和內容都會被重置(比如設置好畫布大小後，畫布上的圖形會消失，需要重新繪制)。
例子
首先，我們創建壹個畫布，寬度為200px，高度為100px，邊框為紅色。然後在中間畫壹個20*20大小的正方形:
密碼
復制代碼
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& lttitle & gt& lt/title & gt；
& lt/head & gt；
& ltbody & gt
& ltcanvas id = " testCanvas " & gt& lt/canvas & gt；
& lt腳本& gt
var畫布，語境；
canvas = document . getelementbyid(" test canvas ")；
畫布.寬度= 200；
帆布.高度= 100；
canvas.style.border = "1px純紅"；
context = canvas . get context(" 2d ")；
context . stroke style = " # 99cc 33 "；
context.fillRect(90，40，20，20)；
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；
復制代碼
將畫布大小縮小1倍。
用css設置畫布大小
相關代碼
canvas . style . width = " 100 px "；
canvas . style . height = " 50px "；
影響
分析
我們發現畫布整體縮小了1倍。
用js設置畫布大小。
相關代碼
復制代碼
畫布.寬度= 100；
canvas.height = 50
//設置畫布大小後，所有樣式都會被重置。所以妳需要重畫正方形。
context.fillRect(90，40，20，20)；
復制代碼
影響
分析
相當於去掉了畫布的右半部分和下半部分，達到了我們預期的效果。