HTML5 canvas自適應手機螢幕寬高度大小

2021-06-23 04:34:51 字數 636 閱讀 9713

本來想使用html5的canvas做乙個手機小遊戲,結果第一步canvas自適應螢幕大小就卡住了:

您的瀏覽器不支援html5 canvas,請換乙個瀏覽器。

把body背景設為藍色,canvas背景設為紅色,大家可以看到二者並未重疊,canvas左上角和body左上角不重合導致上邊和左邊留有藍色空白,而且還有滾動條,使用js**獲取body的寬高度:

//獲取螢幕寬度與高度

gwinheight = document.body.clientheight;

gwinwidth = document.body.clientwidth;

alert(gwinwidth + "," + gwinheight);

結果為(304, 486),但是我的iphone4的螢幕寬度是320,高度是460(算是狀態列是480),但是從計算結果來看,寬高度得到的結果明顯都不對,也不知道是怎麼計算出來的。

您的瀏覽器不支援html5 canvas,請換乙個瀏覽器。

html 自適應手機端寬度

meta name viewport content width device width,initial scale 1 viewport是網頁預設的寬度和高度,上面這行 的意思是,網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1....

HTML5 canvas 繪製圓形

canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法,方法定義如 arc x,y,radius,startangle,endangle,countercl...

HTML5 canvas擦除無效

部分安卓手機上會出現canvas內圖表重疊,並且清除無效,屬於偶現缺陷,非常難以確定其產生原因,比如下圖這個樣子,第一次繪製的圖形沒有擦除,導致第二次繪製時出現重影 初步考慮為裝置自身問題,引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後,發現在每次擦除 cle...