极客笔记HTML5 Canvas – 绘制矩形
HTML5 Canvas 是一个通过 JavaScript 和 HTML 的 canvas 标签创建图形动画的元素。Canvas 可用于通过脚本动态绘制图形，以及用于图形编辑器等应用程序中的图形。本篇文章将主要介绍如何使用 HTML5 Canvas 绘制矩形。
准备工作
在使用 HTML5 Canvas 绘制矩形前，我们需要先创建 Canvas 元素。
<canvas id="myCanvas" width="500" height="500"></canvas>
其中，id 属性为 Canvas 元素的 ID，在 JavaScript 中使用 document.getElementById() 方法获取 Canvas 元素。width 和 height 属性分别为 Canvas 元素的宽度和高度，可以根据需要进行调整。
绘制矩形
HTML5 Canvas 提供了 fillRect() 和 strokeRect() 两个方法用于绘制矩形。
fillRect()
fillRect() 方法用于绘制填充矩形。语法如下：
context.fillRect(x, y, width, height);
其中，context 为 Canvas 上下文对象，在 JavaScript 中使用 canvas.getContext('2d') 方法获取。x 和 y 分别为矩形左上角的坐标，width 和 height 分别为矩形的宽度和高度。
示例代码：
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = '#f00'; // 填充颜色为红色
context.fillRect(50, 50, 100, 100); // 绘制一个边长为 100 像素的红色矩形，左上角坐标为 (50, 50)
strokeRect()
strokeRect() 方法用于绘制矩形边框。语法如下：
context.strokeRect(x, y, width, height);
其中，参数含义同 fillRect() 方法。
示例代码：
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.lineWidth = 2; // 边框线宽为 2 像素
context.strokeStyle = '#0f0'; // 边框颜色为绿色
context.strokeRect(150, 150, 100, 100); // 绘制一个边长为 100 像素的绿色矩形边框，左上角坐标为 (150, 150)
绘制实心边框矩形
我们可以将 fillRect() 和 strokeRect() 结合使用，从而实现绘制出边框宽度不为 0 且填充颜色不为空的矩形。
示例代码：
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.lineWidth = 5; // 边框线宽为 5 像素
context.strokeStyle = '#f00'; // 边框颜色为红色
context.fillStyle = '#00f'; // 填充颜色为蓝色
context.fillRect(250, 250, 100, 100); // 绘制一个边长为 100 像素的蓝色实心矩形，左上角坐标为 (250, 250)
context.strokeRect(250, 250, 100, 100); // 绘制一个边长为 100 像素的红色边框矩形，左上角坐标为 (250, 250)
改变矩形属性
除了填充颜色和边框属性外，我们还可以通过其他属性来改变绘制矩形的效果。
改变透明度
我们可以使用 globalAlpha 属性来改变 Canvas 绘制对象的透明度。值为 0.0 表示完全透明，1.0 表示完全不透明。
示例代码：
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(255,0,0,0.5)'; // 填充颜色为半透明的红色
context.fillRect(50,50,100,100); // 绘制一个边长为 100 像素的半透明红色矩形，左上角坐标为 (50, 50)
改变线型
我们可以使用 setLineDash() 方法来改变边框线的线型，参数为数组。例如，[10, 5] 表示先绘制 10 像素，再空白 5 像素，再绘制 10 像素，以此类推。
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.lineWidth = 5;
context.setLineDash([10, 5]); // 线型为第一个值绘制 10 像素，第二个值空白 5 像素
context.strokeRect(150, 150, 100, 100);
填充渐变色
我们可以使用 Canvas 渐变对象来填充矩形。通过 createLinearGradient() 或 createRadialGradient() 方法创建一个渐变对象，参数分别为起始坐标和结束坐标，在调用 fillStyle 属性设置填充样式时，可以将渐变对象传入，从而实现填充渐变色的效果。
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0,0,500,0); // 创建一个水平渐变对象，从 (0,0) 到 (500,0)
gradient.addColorStop(0, 'red'); // 在 0 处添加红色
gradient.addColorStop(0.5, 'yellow'); // 在 0.5 处添加黄色
gradient.addColorStop(1, 'blue'); // 在 1 处添加蓝色
context.fillStyle = gradient; // 填充样式为渐变对象
context.fillRect(0,0,500,500); // 填充整个 Canvas
结论
本篇文章介绍了如何使用 HTML5 Canvas 绘制矩形。我们可以通过 fillRect() 和 strokeRect() 方法绘制矩形，使用填充颜色和边框属性来改变矩形的显示效果，也可以通过改变 Canvas 绘制对象的属性来改变矩形的显示效果。希望本教程能够帮助大家更好地理解 HTML5 Canvas 绘图技术，欢迎大家多多探索。