獲取canvas的寬高及重置

相信使用canvas製作2d圖畫的程式設計師都遇到過這麼乙個場景，定義好一塊區域，然後在這個區域內繪製圖畫，那麼所繪製的圖畫充滿這個區域，但是因為某些原因，我們要改變canvas的大小，同時改變外部包裹容器的大小。那麼我們怎麼獲取寬高呢？

不同於普通dom節點，我們可以使用document.getelementbyid('').style.width;或者document.getelementbyid('').offserwidth;獲取。
在canvas中，使用這兩種方法均不可，那麼我們怎麼獲取canvas的寬高呢？
首先我們要獲取到canvas,在此還是使用的原生的js,
var canvas = document.getelementbyid('canvas');
接下來，使用getboundingclientrect( )，繪製矩形物件。將canvas所佔的區域繪製為矩形。這個方法返回的是乙個物件，包含元素各邊與頁面上邊與左邊 的距離及構成元素的寬高。【ie有些許數字差，2px】
這樣就可以獲取到canvas的寬高了。

var mycanvas = document.getelementbyid(』 『);

var mycanvas_rect = mycanvas.getboundingclientrect();

var widths = mycanvas_rect.width;

var heights = mycanvas_rect.height;

畫布大小重置相對比較簡單，使用原聲js及jq都可。

document.getelementbyid().style.width = 『500px』;

或 $().css();

關於canvas的寬高

canvas元素預設寬 300px,高 150px,設定其寬高可以使用如下方法 方法一 方法二 使用html5 canvas api操作 canvas.width 500 canvas.height 500 若通過如下方法設定寬高，那麼canvas元素將由原來大小被拉伸到所設定的寬高 使用css 會...

通過JQUERY獲取寬高及作業

補充 滑動視窗 slide windows slidetoggle slideup slidedown的效果 animate v 方法用於建立自定義的動畫，animation n jquery動畫效果終結 show hide,toggle,slideup,slidedown,slidetoggle,...

小程式元件獲取元素寬高失效 和canvas繪製問題

解決辦法 在自定義元件內獲取必須用selectorquery.in component exec const query wx.createselectorquery in this 這一句是最重要的，要用.in this this傳入的是自定義元件的例項。否則獲取到的rect值為null 如果你的...