HTML5 Canvas – 绘制矩形

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 元素。widthheight 属性分别为 Canvas 元素的宽度和高度,可以根据需要进行调整。

绘制矩形

HTML5 Canvas 提供了 fillRect()strokeRect() 两个方法用于绘制矩形。

fillRect()

fillRect() 方法用于绘制填充矩形。语法如下:

context.fillRect(x, y, width, height);

其中,context 为 Canvas 上下文对象,在 JavaScript 中使用 canvas.getContext('2d') 方法获取。xy 分别为矩形左上角的坐标,widthheight 分别为矩形的宽度和高度。

示例代码:

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 绘图技术,欢迎大家多多探索。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程