首頁 >web前端 >H5教程 >HTML5 canvas畫布的寬高為什麼寫在標籤裡的詳細介紹

HTML5 canvas畫布的寬高為什麼寫在標籤裡的詳細介紹

黄舟
黄舟原創
2017-03-21 16:06:021592瀏覽

  以前用canvas畫圖時,都是直接在canvas標籤裡直接寫上寬高,沒有問題,但也沒有探究過為什麼寬高要直接寫在canvas標籤裡,因為各個資料的例子上都是這麼寫的。今天王sir提出了一個問題:如果寬高寫在c9ccee2e6ea535a969eb3f532ad9fe89裡,看看會有什麼不同。自己試了以下,果然有問題。

先看一下程式碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
    body{margin:0;}
    canvas{margin:20px; 
           /*width: 400px;
           height: 300px;*/
          }    
</style>
</head>
<body onload="draw()">
    <canvas id="canvas" width=400 height=300 style="border:1px solid #f00;"></canvas>
<script>
    function draw() {
        var canvas=document.getElementById(&#39;canvas&#39;);
        var context=canvas.getContext(&#39;2d&#39;);
        context.beginPath();
        context.moveTo(20,20);
        context.lineTo(200,100);
        context.lineWidth=5;
        context.stroke();
    }
</script>
</body>
</html>

1.寬:400;高:300;直接寫在5ba626b379994d53f7acf72a64f9b697裡的效果:

#2、刪除5ba626b379994d53f7acf72a64f9b697裡的寬高,寬:400;高:300;寫在c9ccee2e6ea535a969eb3f532ad9fe89裡的效果:

#  為什麼兩者的效果會不一樣呢?

  canvas跟其他標籤一樣,也可以透過css來定義樣式。但這裡要注意的是:canvas的預設寬高為300px * 150px,在css中為canvas定義寬高,實際上把寬高為300px * 150px的畫布進行了拉伸,如果在這樣的情況下進行canvas繪圖,你得到的圖形可能就是變形的效果。所以,在canvas繪圖時,應該在canvas標籤裡直接定義寬高

 

以上是HTML5 canvas畫布的寬高為什麼寫在標籤裡的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn