2. 程式人生 > >Html canvas的width、height與在style中設定寬高的區別

Html canvas的width、height與在style中設定寬高的區別

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

Canvas 的width height屬性

當使用width height屬性時，顯示正常不會被拉伸

<html>
    <body>
        <canvas id="mycanvas" width="300" height="300">
            瀏覽器不支援Canvas,請升級或改用其它瀏覽器！
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mycanvas"
 
),
                ctx = canvas.getContext(‘2d‘);
            ctx.moveTo(0,0);
            ctx.lineTo(300,150);
            ctx.stroke();
        </script>
    </body>
</html>

執行效果如下，為對角線

這裡寫圖片描述

使用style時影象會被拉伸（變形）

<html>
    <head>
        <style type="text/css">
            #mycanvas
 
 {
                width : 150px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas">
            瀏覽器不支援Canvas,請升級或改用其它瀏覽器！
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mycanvas"
 
),
                ctx = canvas.getContext(‘2d‘);
            ctx.moveTo(0,0);
            ctx.lineTo(300,150);
            ctx.stroke();
        </script>
    </body>
</html>

執行效果

這裡寫圖片描述

怎麼理解

Canvas 是一個畫板和一張畫紙，畫板相當於一個容器，畫圖/作業是在畫紙上進行的，

畫板和畫紙的預設寬高是300*150，當畫紙與畫板寬高相等時，影象不會被拉伸，當畫紙與畫板寬高不一樣時，影象就會被拉伸（變形）。

  1. width 和 height 屬性是設定畫板和畫紙的寬高，

如： width=”300” height=”300” 即畫板的寬高是300*300，畫紙的寬高也是300*300，作業的300*300 的對角線影象就不會被拉伸

  1. style樣式 裡設定的是僅畫板的寬高，畫紙的寬高還是為預設值300*150，

（以上圖為例）因此所作業的300*300的對角線影象僅有一部分畫在畫紙上，如下：

這裡寫圖片描述

畫紙不會讓畫板就這麼空出一片，於是畫紙連同影象就要一起拉伸到跟畫板大小一樣。在此例子當中，畫紙寬與畫板寬都為30，而高為畫板的一半，因此只需將高拉伸一倍即可，so 影象也一起被拉伸變瘦，X方向不變，Y方向增至一倍， 所以就得到了變形之後的圖片

這裡寫圖片描述

不拉伸的方法總結

關於HTML5中Canvas的寬、高設定問題

Canvas元素預設寬 300px, 高 150px, 設定其寬高可以使用如下方法(不會被拉伸)：

  • 方法一：直接在標籤中設定其寬高
<canvas width="500" height="500"></canvas>
  • 方法二：使用HTML5 Canvas API 操作
var canvas = document.getElementById("canvasId");
canvas.width = 500;
canvas.width = 500;

若通過如下方法設定寬高，那麼Canvas元素將由原來大小被拉伸到所設定的寬高：

  • 方法一：使用CSS 會被拉伸
#canvasId｛
    width:500px;
    height:500px;
｝
  • 方法二：使用HTML5 Canvas API 操作style
var canvas = document.getElementById("canvasId");
canvas.style.width = "500px";
canvas.style.height = "500px";
  • 方法三：用jquery的$(“#id”).width(500);會被拉伸

注意：canvas的width和height也不能用百分比表示。canvas會將百分值當成數值顯示

相關推薦

Html canvas的width、height與在style中設定寬高的區別

Canvas 的width height屬性 當使用width height屬性時，顯示正常不會被拉伸 <html> <body> <canvas id="mycanvas" width="300"

js中的innerText、innerHTML、屬性值、value與jQuery中的text()、html()、屬性值、val()總結

att text color btn col class 屬性 fun value js與jQuery獲取text、html、屬性值、value的方法是不一樣的。 js與jQuery，text與innerText獲取(<!---->中為結果) html:

vue.js基礎知識篇(4):過濾器、class與style的綁定2

input事件 自定義 size reverse 註意點 參數 in use num -h 代碼下載:網盤 歡迎私信 第一章:過濾器 過濾器是對數據進行處理並返回結果的函數。 1.語法 語法是使用管道符“|”進行連接。過濾器可以接收參數，跟在過濾器後面，帶引號的參數被當做字

Vue.js基礎學習（三、Class 與 Style 繫結）

Class 與 Style 繫結 Class 與 Style 繫結 1.建立一個 Vue 例項 1.1 物件語法 1.2 陣列語法 1.3 用在元件上 2.繫結內聯樣式 2.1

自定義ActionBar的高度、標題與選單中的文字樣式

自定義ActionBar高度 通過actionBarSize設定了ActionBar的高度 <style name="AppTheme" parent="AppBaseTheme"> <item name="android:act

vue.js基礎知識篇(4):過濾器、class與style的繫結2

第一章:過濾器過濾器是對資料進行處理並返回結果的函式。1.語法語法是使用管道符“|”進行連線。過濾器可以接收引數，跟在過濾器後面，帶引號的引數被當做字串處理，不帶引號的引數被當做資料屬性名處理。{{message | filterFunction "arg1" arg2 }}

使用FFmpeg的SDK庫實現將H.264流封裝進MP4檔案時全域性SPS、PPS與流中SPS、PPS衝突的問題

一、問題1. 使用FFmpeg的SDK庫實現將H.264流封裝進MP4檔案的原始碼大致如下：char* filename = "./test.mp4"AVOutputFormat *fmt;AVStream* video_st;AVFormatContext *av_cont

詳解：Python2中的urllib、urllib2與Python3中的urllib以及第三方模組requests

先說說Python2中的url與urllib2（參考此處）： 在python2中，urllib和urllib2都是接受URL請求的相關模組，但是提供了不同的功能。兩個最顯著的不同如下： 1、urllib2可以接受一個Request類的例項來設定URL請求的headers，

java枚舉與.net中的枚舉區別

java .net 通過一段時間的項目實踐，發現java中的枚舉與.net中的枚舉有很大的差別，初期造成了我對java中的枚舉一些錯誤理解及部分有缺陷的應用，其實追其原因還是因為我會習慣性的認為java的枚舉在作用以及定義上與.net應該是差不多的，畢竟兩者都是高級語言，語言上也有很多相似之處。這就

Sql與oracle中null值的區別

adf immediate lec 算術 描述 不出 等價 int 分開 　　原貼鏈接請點擊： 1 null值的介紹 NULL 是數據庫中特有的數據類型，當一條記錄的某個列為 NULL ，則表示這個列的值是未知的、是不確定的。既然是未知的，就有無數種的可

css中固定寬高div與不固定寬高div垂直居中的處理辦法

分配 css代碼 http min har 空間 -i dex round 固定高寬div垂直居中 如上圖，固定高寬的很簡單，寫法如下： 1 position: absolute; 2 left: 50%; 3 top: 50%; 4 width:200px;

什麽是雲計算？大數據、AI與雲計算有什麽區別？

雲計算×××老師註意到，很多朋友都鬧不明白，什麽是雲計算。如果說這三個漢字還能從字面上才出一些意思的話，那麽雲計算的三個方向：IaaS、PaaS和SaaS就更讓人頭大……。 假設有這麽一加技術超一流的公司，根本就不需要別人來提供服務，自己擁有基礎設施、應用等等，可以把他們分為三層：基礎設施（infrastru

總結oninput、onchange與onpropertychange事件的用法和區別

前端頁面開發的很多情況下都需要實時監聽文字框輸入，比如騰訊微博編寫140字的微博時輸入框hu9i動態顯示還可以輸入的字數。過去一般都使用onchange/onkeyup/onkeypress/onkeydown實現，但是這存在著一些不好的使用者體驗。比如onchange事件只在鍵盤或者滑鼠操作

c#與java中byte位元組的區別及轉換方法

在java中  byte的範圍在 [-128,127] 在C#中  byte的範圍在 [0,255] 所以 java程式與C#程式 進行資料傳輸的時候 要先把java的byte陣列轉換成在[0,255]範圍內的int型陣列a[];再把a[]進行加密得到字串str, 把字串

DOM中獲取寬高、位置總結

原生JS 一、文件、視窗的寬高和位置 // 獲取螢幕的寬高 window.screen.height | window.screen.width // 螢幕可用工作區寬高 window.screen.availHeight | window.screen.availWidth //

傳統javabean與spring中的bean的區別

用處不同：傳統javabean更多地作為值傳遞引數，而spring中的bean用處幾乎無處不在，任何元件都可以被稱為bean。 寫法不同：傳統javabean作為值物件，要求每個屬性都提供getter和setter方法；但spring中的bean只需為接受設值注入的屬性提供

行內元素和塊級元素的區別，為何img、input等行內元素可以設定寬高??（夯實基礎）

<spanstyle="display: inline-block;width:400px;height:60px;border:1px solid blue;">當使用display：inline-block；後，行內元素可以設定寬高</span> (ads

Object中的tostring與Array中的tostring的區別？

Object 類的 toString 方法返回一個字串，該字串由類名（物件是該類的一個例項）、at  標記符“@”和此物件雜湊碼的無符號十六進位制表示組成。Arrays的toString方法是返回指定陣列內容的字串表示形式。 兩者是重名函式關係，沒有複寫。 從意會的角度講，這就好比羊喝水和你喝水一

oninput、onchange與onpropertychange事件的用法和區別

概述 前端頁面開發的很多情況下都需要實時監聽文字框輸入，比如騰訊微博編寫140字的微博時輸入框hu9i動態顯示還可以輸入的字數。過去一般都使用onchange/onkeyup/onkeypress/onkeydown實現，但是這存在著一些不好的使

Nio中的channel與Oio中的stream的區別

channel是雙向的，既可以讀，也可以寫。而stream是單向的，一個stream不可能同時讀同時寫，這樣也從java規範中不允許的，因為inputstream和outputstream都是抽象類，一個類不可能同時繼承兩個抽象類。應用程式通過channel讀取外部資料（比如