Canvas的基本用法

2022-07-16 00:03:17 字數 1534 閱讀 8103

canvas沒有設定寬度和高度的時候,會初始化寬度:300畫素和高度:150畫素。可以使用css來定義大小,但在繪製時影象會伸縮以適應它的框架尺寸:如果css的尺寸與初始畫布的比例不一致,它會出現扭曲。

如果你繪製出來的影象是扭曲的, 嘗試在的屬性中明確規定寬和高,而不是使用css。

如果瀏覽器不支援,那麼在標籤輸入替換提示內容。支援的瀏覽器將會忽略替換提示內容,正常渲染canvas。

<

canvas

id="stockgraph"

width

="150"

height

="150"

>

您的瀏覽器不支援canvas 功能

<

img

src="images/clock.png"

width

="150"

height

="150"

alt=""

/>

canvas

>

//

通過使用 document.getelementbyid() 方法來為 元素得到dom物件

var canvas = document.getelementbyid('tutorial');

//使用getcontext() 方法來訪問繪畫上下文。

var ctx = canvas.getcontext('2d');

替換內容是用於在不支援標籤的瀏覽器中展示的。通過測試getcontext()方法的存在,指令碼可以檢查程式設計支援性

var canvas = document.getelementbyid('tutorial');

if(canvas.getcontext) else

<

body

>

<

canvas

id="tutorial"

width

="150"

height

="150"

>

canvas

>

body

>

window.onload=function

()function

draw()

}

當頁面載入結束的時候就會執行draw()這個函式。通過使用在文件上載入事件來完成。只要頁面載入結束,這個函式,或者像是這個的,同樣可以使用window.settimeout()window.setinterval(),或者其他任何事件處理程式來呼叫。

簡單的例子:

function

draw()

}

效果如下:

canvas基本用法

1 開始之前 預設大小 300px 150px2 基本用法 1.canvas元素 2.渲染上下文 var canvas document.getelementbyid tutorial var ctx canvas.getcontext 2d 使用document.getelementbyid 方法...

canvas 的基本用法

1.canvas 標籤只有width和height兩個屬性。盡量用width和height屬性為 canvas 明確規定寬高,而不是使用 css,避免影象扭曲。2.當沒有設定寬度和高度的時候,canvas 會初始化寬度為300畫素和高度為150畫素。3.id屬性並不是canvas元素所特有的,但建議...

canvas的基本用法

預設width 300px 預設height 150px 它的預設背景顏色繼承body的背景顏色。canvas畫布的內容在canvas標籤的上面,而不是在兩個標籤裡面。不支援canvas的瀏覽器會顯示canvas標籤裡面的內容,支援canvas的瀏覽器不會顯示標籤裡面的內容。您的瀏覽器不支援畫布元素...