矩形的繪制
Canvas的API 提供了3個方法，分別用于矩形的清除、描邊及填充
clearRect(double x, double y, double w, double h)strokeRect(double x, double y, double w, double h)fillRect(double x, double y, double w, double h)繪制一個最簡單的矩形，起始位置（10,10），寬度100，高度100
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.strokeRect(10, 10, 100, 100);
繪制矩形.png
- 給矩形填充顏色
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.strokeRect(10, 10, 100, 100);
context.fillStyle = 'orange';
context.fillRect(20, 20, 100, 100);
填充矩形.png
- 清除矩形
清除矩形的操作有點類似橡皮擦的效果。
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.strokeRect(10, 10, 100, 100);
context.fillStyle = 'orange';
context.fillRect(20, 20, 100, 100);
context.canvas.onmousedown = function(e) {
context.clearRect(0, 0, 100, 100);
}
清除矩形.png
- 設置繪制矩形的線寬
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.lineWidth = 30;
context.strokeRect(50, 50, 400, 200);
設置lineWidth.png
- 設置繪制矩形的lineJoin
lineJoin的取值有3個：- bevel 斜角
- round 圓角
- miter 斜切
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.lineJoin = 'round';
context.lineWidth = 30;
context.strokeRect(50, 50, 400, 200);
繪制矩形的lineJoin-bevel.png
繪制矩形的lineJoin-round.png
繪制矩形的lineJoin-miter.png
