要使用HTML5的`＜canvas＞`元素来绘制线性渐变的矩形，你可以按照以下步骤操作

Bol5261

已于 2024-12-20 17:15:37 修改

阅读量519

点赞数

分类专栏： HTML5(HyperText Markup) CSS(Cascading Style Sheets) Javascript(Promise/asyncAwait) 文章标签： js css javascript canvas html

于 2020-06-27 15:58:30 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/106983807

版权

要使用HTML5的<canvas>元素来绘制线性渐变的矩形，你可以按照以下步骤操作：

首先，在HTML中设置一个canvas元素，并为其赋予id以便于JavaScript访问：

<canvas id="myCanvas" width="400" height="200"></canvas>

在JavaScript中，通过document.getElementById()获取canvas元素并获取其2D渲染上下文（context）：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

使用createLinearGradient()创建线性渐变对象，传入起始点和结束点坐标以及颜色数组：

var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'red'); // 起始颜色
gradient.addColorStop(1, 'blue'); // 结束颜色

绘制渐变矩形，调用fillStyle设置渐变作为填充样式，然后使用fillRect()方法：

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

完整的示例

最低0.47元/天解锁文章