HTML5 Canvas绘制渐变（一）

最新推荐文章于 2025-08-01 09:42:51 发布

原创最新推荐文章于 2025-08-01 09:42:51 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

Html5案例专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用HTML5的canvas元素和JavaScript来创建一个从白色到红色的线性渐变背景。通过设置渐变的起点和终点，可以实现从画布的左上角到右下角的渐变效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>绘制渐变</title>
</head>

<body>
<canvas></canvas>
<script>

//绘制渐变和模式(线性渐变)
var canvas = document.querySelector('canvas'),
	ctx = canvas.getContext('2d');
gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#f00');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.width);
</script>
</body>
</html>

参数是渐变的起始点：X1和Y1，以及渐变的结束点：X2和Y2。在这个例子中，我们告诉渐变从左上方开始，在画布的右下方结束。于是创建了一个线性渐变