canvas筆記

康為發表於2018-07-26
Canvas筆記

1，canvas畫布有一個預設的寬高300x150,設定canvas畫布的寬高有三種方法，一種是css，一種是html，一種是js動態生成

<canvas id="wrapper" width="400" height="400"></canvas>
複製程式碼

 CSS 來設定寬高的話，畫布就會按照 300 * 150 的比例進行縮放，也就是將 300 * 150 的頁面顯示在 400 * 400 的容器中。儘量避免用css直接繪製畫布的width和height。canvas是

display:inline-block元素，居中樣式對齊需要轉成塊級元素複製程式碼

2，canvas本身沒有繪圖的能力，需要用js進行內部繪製

var canvas = document.getElementById("wrapper"); // 首先建立找到畫布
var context = canvas.getContext('2d'); // 建立ctx物件
var cx = canvas.width = 400; // 指定寬
var cy = canvas.height = 400;// 指定高
// 繪製矩形
context.fillStyle = '#FF0000';
context.fillRect(50,50,150,75);
設定fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 預設設定是#000000（黑色）
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。canvas畫布是一個二維座標，預設左上角為（0,0）;context.fillRect(50,50,150,75);

複製程式碼



相關文章