[Canvas 学习笔记]绘图 - 矩形

[musicode]

相关 API 如下：

• strokeRect(x, y, width, height)
• fillRect(x, y, width, height)
• clearRect(x, y, width, height)

先看个简单的 例子：

context.lineWidth = 5;

context.strokeRect(90, 20, 100, 50);
context.fillRect(90, 80, 100, 50);

canvas.onclick = function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
};

点击画布，clearRect 会清除画布所有的像素，这里的清除实际指的是把颜色设置为全透明的黑色。

fillRect 表示为矩形填充颜色。

strokeRect 表示为矩形描边。

描边效果受以下属性的影响：

• strokeStyle：颜色 章节详细讲解
• lineWidth： 线条 章节详细讲解
• lineJoin：线条 章节详细讲解
• miterLimit：线条 章节详细讲解

lineWidth 表示线条的粗细，设置稍微大一些可观察接线的样式，默认是方角（square corner）。