Canvas中怎么設(shè)置width與height

這篇文章給大家分享的是有關(guān)Canvas中怎么設(shè)置width與height的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

目前創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、東營網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

最近因?yàn)楣ぷ餍枰?，所以就學(xué)了一下Html中的Canvas標(biāo)簽。

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

沒有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" 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);

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

Canvas中怎么設(shè)置width與height

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

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

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

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

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

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

 所以，通過上面的資料便可知道其原因就是我上面例子中代碼會(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é)果：

Canvas中怎么設(shè)置width與height

感謝各位的閱讀！關(guān)于“Canvas中怎么設(shè)置width與height”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁名稱：Canvas中怎么設(shè)置width與height
URL鏈接：http://bm7419.com/article0/gejjio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、App開發(fā)、網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、云服務(wù)器、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)