溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么是canvas？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
1. canvas介紹
Canvas元素的出現，可以說開啟的Web世界繪制動畫，圖形的大門，其功能非常強大
canvas 元素是HTML5中功能最強大的元素，它的能力主要是通過Canvas中的Context（繪圖上下文/繪圖環境）對象表現出來的。該對象從canvas本身獲取。
var canvas = getElementById('canvas');var context = canvas.getContext('2d');2. canvas的后備內容
Canvas元素之間包含的文本，這種文本稱為 "后備內容"，只有在瀏覽器不支持canvas元素時才會顯示該文本內容
<canvas>當前瀏覽器不支持canvas元素，請更換瀏覽器</canvas>
3. Canvas的尺寸
canvas元素時默認寬為300px、高為150px。
我們可以通過canvas的width，height屬性去修改canvas的大小，我們也可通過CSS去修改canvas元素的大小。但是二者的修改是有區別的。
canvas實際上有兩套尺寸：
一個是canvas元素的大小，一個是canvas繪圖表面的大小。
當我們用canvas的屬性width，height時實際上我們同時修改了元素的大小與繪圖表面的大小
當我們用CSS來設定時，是會修改canvas元素的大小，不會影響繪圖表面的大小，這時瀏覽器就會對繪圖表面縮放，會出現我們不想得到的效果
width與height屬性修改canvas尺寸大小時的表現
<canvas id="canvas" width="600" height="300">當前瀏覽器不支持canvas，請更換瀏覽器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);</script>
用CSS去修改canvas元素尺寸大小時的表現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas尺寸問題</title>
<style>#canvas {
margin: 0 auto;
padding: 0;
width: 600px;
height: 300px;
border: 1px solid #ccc;
}</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">當前瀏覽器不支持canvas，請更換瀏覽器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);</script>
</body>
</html>
所以我們在設置Canvas元素的大小時，最好不要使用CSS去設置，我們可以這么去設置
<canvas id="canvas" width="600" height="300">當前瀏覽器不支持canvas，請更換瀏覽器</canvas>
或者
<script type="text/javascript">var canvas = document.getElementById('canvas');
canvas.width = '600'; //canvas的屬性取值為非負整數，所以不能帶有pxcanvas.height = '300';</script>4. canvas API
canvas元素并未提供很多API，它只提供了兩個屬性三個方法，而繪圖功能的方法與屬性全都是canvas的繪圖環境（context）對象提供。
width：設置/獲取canvas元素繪圖表面的寬度，默認值為300。
height：設置/獲取canvas元素繪圖表面的高度，默認值為150。
getContext(): 返回canvas元素的繪圖環境對象。
toDataURL(): 描述：返回一個data URI：會根據type指定的參數形式將canvas中的圖片編碼成一個UTF-16字符串的形式。
toBold(): 描述：創建Blob對象，用以展示canvas上的圖片；這個圖片文件可以被緩存或保存到本地，由User Agent( 用戶代理端 )自行決定。
toDataURL():
type 可選參數
圖片格式，默認為 image/png
encoderOptions 可選參數
當圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區間內選擇圖片的質量。
如果超出取值范圍，將會使用默認值 0.92，默認分辨率為96dpi。
這里值得注意：
如果canvas的高度或者寬度為0時，會返回字符串 "data:,"
如果傳入的類型不是 "image/png", 但是返回的值以 "data: image/png"開頭，說明傳入的類型不支持
Chrome支持“image/webp”類型
盡管在默認情況下canvas對象是一副位圖，但是并不是HTML中的img元素，所以我們可以利用toDataURL方法創建一幅表示canvas的圖像;也可以利用此方法創建和操作緩沖canvas。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas尺寸問題</title>
<style>#canvas {
margin: 0 auto;
padding: 0;
display: none;
}</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">當前瀏覽器不支持canvas，請更換瀏覽器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var dataImage = document.getElementById('dataImage');
canvas.width = '600'; //canvas的屬性取值為非負整數，所以不能帶有pxcanvas.height = '300';var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);var dataUrl = canvas.toDataURL();
dataImage.src = dataUrl;</script>
</body>
</html>toBold():
目前該方法只有Firefox與IE10瀏覽器支持
關于什么是canvas問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
