溫馨提示×

溫馨提示×

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

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

在html5中怎么設(shè)置canvas的寬高

發(fā)布時(shí)間：2022-02-22 14:14:29 來源：億速云 閱讀：262 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了“在html5中怎么設(shè)置canvas的寬高”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“在html5中怎么設(shè)置canvas的寬高”這篇文章吧。

Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動畫等。

沒有Canvas的年代，繪圖只能借助Flash插件實(shí)現(xiàn)，頁面不得不用JavaScript和Flash進(jìn)行交互。有了Canvas，我們就再也不需要Flash了，直接使用JavaScript完成繪制。

當(dāng)我看了一下教程后，自己寫了一個(gè)hello world的時(shí)候，麻煩事就出現(xiàn)了。看下面代碼：

<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas1" >
</canvas>
<script>
    var oC = document.getElementById('canvas1');
    var ctx = oC.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();
</script>
</body>
</html>

上面代碼的意思，是要在一個(gè)width和height各為200px的canvas上畫一條直線，該直線的起點(diǎn)為(0,0)，終點(diǎn)為(200,200);

然而瀏覽器畫出來的圖像卻是：

在html5中怎么設(shè)置canvas的寬高

一看這圖~怎么是這樣的斜度？不應(yīng)該啊~本應(yīng)該是一個(gè)對角線才對啊~~

后來差了一下資料才知道，canvas標(biāo)簽設(shè)置width和height的時(shí)候，有以下幾種方式和產(chǎn)生的后果：

Canvas元素默認(rèn)寬 300px, 高 150px, 設(shè)置其寬高可以使用如下方法：
方法一：
1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>
方法二：使用HTML5 Canvas API操作
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.width = 500;
3 canvas.width = 500;

若通過如下方法設(shè)置寬高，那么Canvas元素將由原來大小被拉伸到所設(shè)置的寬高：
方法一：使用CSS 會被拉伸
1 #欲操作canvas的id｛
2     width:1000px;
3     height:1000px;
4 ｝

也包含了行間樣式中的  。也就是上面的例子，也會產(chǎn)生拉伸的情況。
方法二：使用HTML5 Canvas API操作 會被拉伸
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";
方法三 ：用jquery的$("#id").width(500);會被拉伸

其它：canvas的width和height也不能用百分比表示。canvas會將百分值當(dāng)成數(shù)值顯示

 所以，通過上面的資料便可知道其原因就是我上面例子中代碼會讓canvas的寬高被拉伸了，從而使得圖像跟預(yù)想的不一致的。

現(xiàn)在我重寫了一份正確設(shè)置canvas寬高大小的代碼例子：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" >
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(0, 0);
    cxt.lineTo(200, 200);
    cxt.stroke();
</script>
</body>
</html>

以上是“在html5中怎么設(shè)置canvas的寬高”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向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
助
手