溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

什么是canvas

發(fā)布時(shí)間：2020-07-15 11:22:12 來源：億速云 閱讀：154 作者：Leah 欄目：web開發(fā)

什么是canvas？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

1. canvas介紹

Canvas元素的出現(xiàn)，可以說開啟的Web世界繪制動畫，圖形的大門，其功能非常強(qiáng)大
canvas 元素是HTML5中功能最強(qiáng)大的元素，它的能力主要是通過Canvas中的Context（繪圖上下文/繪圖環(huán)境）對象表現(xiàn)出來的。該對象從canvas本身獲取。

var canvas = getElementById('canvas');var context = canvas.getContext('2d');

2. canvas的后備內(nèi)容

Canvas元素之間包含的文本，這種文本稱為 "后備內(nèi)容"，只有在瀏覽器不支持canvas元素時(shí)才會顯示該文本內(nèi)容

<canvas>當(dāng)前瀏覽器不支持canvas元素，請更換瀏覽器</canvas>

3. Canvas的尺寸

canvas元素時(shí)默認(rèn)寬為300px、高為150px。

我們可以通過canvas的width，height屬性去修改canvas的大小，我們也可通過CSS去修改canvas元素的大小。但是二者的修改是有區(qū)別的。

canvas實(shí)際上有兩套尺寸：

一個(gè)是canvas元素的大小，一個(gè)是canvas繪圖表面的大小。

當(dāng)我們用canvas的屬性width，height時(shí)實(shí)際上我們同時(shí)修改了元素的大小與繪圖表面的大小

當(dāng)我們用CSS來設(shè)定時(shí)，是會修改canvas元素的大小，不會影響繪圖表面的大小，這時(shí)瀏覽器就會對繪圖表面縮放，會出現(xiàn)我們不想得到的效果

width與height屬性修改canvas尺寸大小時(shí)的表現(xiàn)

<canvas id="canvas" width="600" height="300">當(dāng)前瀏覽器不支持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>

什么是canvas

用CSS去修改canvas元素尺寸大小時(shí)的表現(xiàn)

<!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">當(dāng)前瀏覽器不支持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

所以我們在設(shè)置Canvas元素的大小時(shí)，最好不要使用CSS去設(shè)置，我們可以這么去設(shè)置

<canvas id="canvas" width="600" height="300">當(dāng)前瀏覽器不支持canvas，請更換瀏覽器</canvas>

或者

<script type="text/javascript">var canvas = document.getElementById('canvas');
canvas.width = '600'; //canvas的屬性取值為非負(fù)整數(shù)，所以不能帶有pxcanvas.height = '300';</script>

4. canvas API

canvas元素并未提供很多API，它只提供了兩個(gè)屬性三個(gè)方法，而繪圖功能的方法與屬性全都是canvas的繪圖環(huán)境（context）對象提供。

  1. width：設(shè)置/獲取canvas元素繪圖表面的寬度，默認(rèn)值為300。

  2. height：設(shè)置/獲取canvas元素繪圖表面的高度，默認(rèn)值為150。

  3. getContext(): 返回canvas元素的繪圖環(huán)境對象。

  4. toDataURL(): 描述：返回一個(gè)data URI：會根據(jù)type指定的參數(shù)形式將canvas中的圖片編碼成一個(gè)UTF-16字符串的形式。

  5. toBold(): 描述：創(chuàng)建Blob對象，用以展示canvas上的圖片；這個(gè)圖片文件可以被緩存或保存到本地，由User Agent( 用戶代理端 )自行決定。

toDataURL():

　   type 可選參數(shù)

　　圖片格式，默認(rèn)為 image/png

　　encoderOptions 可選參數(shù)

　　當(dāng)圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。

　　如果超出取值范圍，將會使用默認(rèn)值 0.92，默認(rèn)分辨率為96dpi。

　　 這里值得注意：

  • 如果canvas的高度或者寬度為0時(shí)，會返回字符串 "data:,"

  • 如果傳入的類型不是 "image/png", 但是返回的值以 "data: image/png"開頭，說明傳入的類型不支持

  • Chrome支持“image/webp”類型

　　盡管在默認(rèn)情況下canvas對象是一副位圖，但是并不是HTML中的img元素，所以我們可以利用toDataURL方法創(chuàng)建一幅表示canvas的圖像;也可以利用此方法創(chuàng)建和操作緩沖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">當(dāng)前瀏覽器不支持canvas，請更換瀏覽器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var dataImage = document.getElementById('dataImage');
    canvas.width = '600'; //canvas的屬性取值為非負(fù)整數(shù)，所以不能帶有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瀏覽器支持

關(guān)于什么是canvas問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手