2020-06-22-Canvas笔记02-矩形绘制

矩形的绘制

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