關於canvas寬高設定的一些整理
阿新 • • 發佈：2019-02-16
我們先來看一個問題，這是從W3School上截下來的一個canvas畫圓的程式碼，其效果如圖
但是當我將canvas標籤的行間樣式寫入內部或外部樣式表時，所產生的效果是這樣的<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke(); </script> </body> </html>
程式碼
<head>
<style>
canvas{
width: 300px;
height: 300px;
border:1px solid #d3d3d3;
}
</style>
</head>下面是我的理解，如有錯誤請指出，canvas會先在預設寬高中繪製圖片，在css中設定相當於對於原有的圖片進行拉伸變換，在行間中設定相當於更改預設值。