轉載自:http://www.189works.com/article-102274-1.html
canvas寬高問題探究——寬高寫在<canvas>標籤和<style>樣式裏進行畫圖時,效果爲什麼不一樣呢?
以前用canvas畫圖時,直接在canvas標籤裏直接寫上寬高,沒有問題,但也沒有探究過爲什麼寬高要直接寫在canvas標籤裏,因爲各個資料的例子上都是這麼寫的。今天王老師正式講canvas時提出了一個問題:如果把寬高寫在<style>裏,看看會有什麼不同。自己試了以下,果然有問題。
先看一下代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <meta name="Keywords" content=""> <meta name="Description" content=""> <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('canvas'); var context=canvas.getContext('2d'); context.beginPath(); context.moveTo(20,20); context.lineTo(200,100); context.lineWidth=5; context.stroke(); } </script> </body> </html>
1.寬高直接寫在<canvas>裏的效果:
2、刪除<canvas>裏的寬高,把寬高寫在<style>裏的效果:
爲什麼兩者的效果會不一樣呢,在網上通過大神們的講解,終於明白了。
canvas跟其他標籤一樣,也可以通過css來定義樣式。但這裏需要注意的是:canvas的默認寬高爲300px * 150px,在css中爲canvas定義寬高,實際上把寬高爲300px * 150px的畫布進行了拉伸。因此,如果在這樣的情況下進行canvas繪圖,你得到的圖形可能就是變形的效果。所以在canvas繪圖時,最好直接在canvas標籤裏直接定義寬高。