【canvas画图】画一个彩虹

article/2025/11/10 10:42:15

主要是为了熟悉一下createRadialGradient()的用法：

createRadialGradient(开始圆x坐标, 开始圆y坐标, 开始圆r半径, 结束圆x坐标, 结束圆y坐标, 结束圆r半径)

在这里插入图片描述
换汤不换药，由官方例子变通一下就可得到：

<!DOCTYPE html>
<html lang="cms-Hans-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>画个彩虹</title>
</head><body><canvas id="myCanvas" width="500" height="500"></canvas>
</body><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// 创建渐变 createRadialGradient(开始圆x坐标, 开始圆y坐标, 开始圆r半径, 结束圆x坐标, 结束圆y坐标, 结束圆r半径)var grd = ctx.createRadialGradient(250, 500, 150, 250, 500, 350);// “红色#FF0000 橙色 #FF7F00 黄色 #FFFF00 绿色 #00FF00 青色 #00FFFF 蓝色 #0000FF 紫色 #8B00FF”grd.addColorStop(0, "#ffffff");grd.addColorStop(0.3, "#8B00FF");grd.addColorStop(0.4, "#0000FF");grd.addColorStop(0.5, "#00FFFF");grd.addColorStop(0.6, "#00FF00");grd.addColorStop(0.7, "#FFFF00");grd.addColorStop(0.8, "#FF7F00");grd.addColorStop(0.9, "#FF0000");grd.addColorStop(1, "#ffffff");// 填充渐变ctx.fillStyle = grd;ctx.fillRect(10, 10, 500, 500)
</script></html>