今天我們來(lái)講講有關(guān)于：“在html5中如何設(shè)置canvas的寬高問(wèn)題？方法代碼分享！”這個(gè)問(wèn)題，下面是有關(guān)于這個(gè)問(wèn)題的相關(guān)內(nèi)容。
最近因?yàn)楣ぷ餍枰?，所以就學(xué)了一下Html中的Canvas標(biāo)簽。
Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動(dòng)畫等。
沒(méi)有Canvas的年代，繪圖只能借助Flash插件實(shí)現(xiàn)，頁(yè)面不得不用JavaScript和Flash進(jìn)行交互。有了Canvas，我們就再也不需要Flash了，直接使用JavaScript完成繪制。
當(dāng)我看了一下教程后，自己寫了一個(gè)hello world的時(shí)候，麻煩事就出現(xiàn)了?？聪旅娲a：
<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas1" style="width: 200px;height: 200px; border:1px solid black;">
</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);
然而瀏覽器畫出來(lái)的圖像卻是：
一看這圖~怎么是這樣的斜度？不應(yīng)該啊~本應(yīng)該是一個(gè)對(duì)角線才對(duì)啊~~
后來(lái)差了一下資料才知道，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;若通過(guò)如下方法設(shè)置寬高，那么Canvas元素將由原來(lái)大小被拉伸到所設(shè)置的寬高：
方法一：使用CSS 會(huì)被拉伸
1 #欲操作canvas的id｛
2 width:1000px;
3 height:1000px;
4 ｝也包含了行間樣式中的 style="" 。也就是上面的例子，也會(huì)產(chǎn)生拉伸的情況。
方法二：使用HTML5 Canvas API操作 會(huì)被拉伸
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";
方法三 ：用jquery的$("#id").width(500);會(huì)被拉伸其它：canvas的width和height也不能用百分比表示。canvas會(huì)將百分值當(dāng)成數(shù)值顯示
所以，通過(guò)上面的資料便可知道其原因就是我上面例子中代碼會(huì)讓canvas的寬高被拉伸了，從而使得圖像跟預(yù)想的不一致的。
現(xiàn)在我重寫了一份正確設(shè)置canvas寬高大小的代碼例子：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid black;">
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>結(jié)果：
結(jié)束。
總結(jié)
經(jīng)過(guò)這篇文典的講解相信大家對(duì)于：“在html5中如何設(shè)置canvas的寬高問(wèn)題？方法代碼分享！”這個(gè)問(wèn)題的相關(guān)內(nèi)容。以上就是這篇文章的全部?jī)?nèi)容了，更多其他的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。
