canvas標籤的width和height以及style.width和style.height的區別

阿新 • • 發佈：2019-01-16

由於HTML5 Canvas本身的特殊性，所以其大小的設定是很有講究的。下面我們先來看看Canvas一般的寫法。

HTML5 標籤用法程式碼顯示

HTML程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas width（寬）與height（高）</title>
    <style>
        canvas{border: 1px solid #ccc}
    </style 
>
</head>
<body>
<canvas id="mycanvas">瀏覽器不支援Canvas,請升級或改用其它瀏覽器！</canvas>
<script src="./js/canvas.js"></script>
</body>
</html>

JavaScript程式碼

window.onload = function(){
    var mycanvas = document.getElementById('mycanvas');
    var ctx = mycanvas.getContext('2d' 
);
    ctx.font ='28px Arial';
    ctx.fillStyle = '#0099CC';
    ctx.fillText('雲庫網 - 前端開發',35,30);
}

Canvas大小的修改有三種方法

方法一：通過CSS樣式來控制Canvas元素，具體程式碼如下

canvas{border: 1px solid #ccc;width: 600px;height: 300px;}

這裡給canvas加了一個邊框樣式，只是為了方便大家檢視元素變化。

方法二：直接在canvas標籤內定義width和height。具體程式碼如下

<canvas id="mycanvas" 
 width='580' height='350' >瀏覽器不支援Canvas,請升級或改用其它瀏覽器！</canvas>

方法三：在JS程式碼裡面設定width和height，在var ctx = mycanvas.getContext(‘2d’);後面追加如下程式碼

mycanvas.width = 580;
mycanvas.height = 350;

程式碼裡的mycanvas就是前面通過var mycanvas = document.getElementById(‘mycanvas’);獲取的canvas物件，這個根據具體情況進行替換就好了。

那麼兩個問題來了，如果你有測試過這兩種方法的話，你就會發現通過CSS樣式控制與直接在Canvas標籤內定義width（寬）和height（高），他們在瀏覽器上顯示的效果是不一樣的。通過CSS樣式控制的canvas裡面的內容會被自動放大了。而在Canvas標籤內容定義的width和height就不會。這是為什麼呢？

原來Canvas標籤包涵兩個東西，一個是元素本身，另一個是元素繪圖表面（drawing surface）。他們都有著自己各自的尺寸大小。所在canvas的大小實際上是指兩方面的，元素本身的大小和元素繪圖表面大小。Canvas元素本身和元素繪圖表面預設的大小都是300x150畫素。

前面提到的兩個設定Canvas大小的方法的區別在於，通過CSS設定Canvas大小時，只對Canvas元素本身的大小進行設定，而沒有對元素繪圖表面大小進行設定，所以元素繪圖表面是預設大小300x150畫素。當Canvas元素本身大小與元素繪圖表面不一樣時，瀏覽器會對元素繪圖表面進行縮放，使其符合元素大小。所以就會出現上面看到的兩中不同的效果。而在canvas標籤內直接定義width和height就不一樣了，它是同時定義元素本身大小和元素繪圖表面大小。通過JS來定義與在canvas標籤內定義效果是一樣的。

canvas標籤的width和height以及style.width和style.height的區別

新手初入Java（二）資料型別、變數和常量以及拆包和

自制爬蟲，爬取分類總閱讀量，總評論量。全部文章閱讀量和，以及評論量和。但是發現數據不對

C#：區分：重寫、覆蓋和過載以及虛方法和抽象方法

extjs 迴圈執行多個非同步請求時，引數和後臺以及相關問題和衍生問題的處理

POST和GET以及同步請求和非同步請求的區別

python 分離檔名和路徑以及分離檔名和字尾

HTML連載34-背景關聯和縮寫以及插圖圖片和背景圖片的區別

canvas標籤的width和height以及style.width和style.height的區別

用javascript控制css中style.height和style.width時應注意px單位問題

canvas裡設定width和css裡設定width和js裡設定width的區別

style.width 和offsetwidth的區別

js獲取瀏覽器和設備相關width（屏幕的寬度）

***獲取螢幕寬高：width(),height(),clientHeight,clientWidth 獲取寬高的區別*

vue練習demo 實現簡單的輪播圖,方法簡單快捷,使用到transition-group標籤增加使用者體驗以及vue中的class與style繫結

使用mybatis提供的各種標籤方法實現動態拼接Sql。這裡演示where標籤和if標籤實現使用姓名的模糊查詢和性別查詢使用者列表，當用戶沒有選擇姓名以及性別時查詢出所有的記錄。

Chrome和Safari瀏覽器jquery width()獲取不到高度的問題

web前段設計之痛：手機瀏覽器和pc瀏覽器的width:100%的自適應問題

XHTML：非IE瀏覽器裡對style.width賦值無效的問題

基於js中style.width與offsetWidth的區別

去掉html標籤與標籤之間的空格以及標籤和內容之間的空格

canvas標籤的width和height以及style.width和style.height的區別

相關推薦