canvas基本用法
阿新 • • 發佈：2021-01-25
首先建立canvas元素
<canvas id="canvas" width="150" height="150"></canvas>
width和height 也可以不指定，canvas會初始化寬度為300畫素和高度為150畫素
可以用CSS來指定這兩個值，但如果css尺寸與初始畫布的比例不一致，它會出現扭曲，所以官方建議用js來設定 width和height這兩個屬性。
var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300';
注意：canvas.width='300'; 沒有px哦，不然指定不成立。
獲取上下文
var ctx = canvas.getContext('2d');這個上下文就是繪畫的基礎，後面所有的動作都是要在這個上下文中操作。
<body> <canvas id='canvas' ></canvas> </body> <script type="text/javascript"> window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); //在x軸為10，y軸為10的位置畫長為120，寬為80的長方形 ctx.strokeRect(10,10,120,80); //在x軸為120，y軸為120的位置畫長為160，寬為100的長方形 ctx.strokeRect(120,120,160,100); }
上面程式碼得到的效果就是下圖
