运用canvas技术画出彩虹
以下是使用JavaScript和Canvas绘制彩虹的代码：
<!DOCTYPE html>
<html>
<head>
<title>Rainbow</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义彩虹颜色数组
const colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3'];
// 定义弧度开始和结束角度
const startAngle = 0;
const endAngle = Math.PI * 2;
// 定义弧度半径
const radius = canvas.height / 2;
// 定义弧度中心点坐标
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// 循环绘制彩虹
for (let i = 0; i < colors.length; i++) {
ctx.beginPath();
ctx.arc(centerX, centerY, radius - (i * 20), startAngle, endAngle);
ctx.strokeStyle = colors[i];
ctx.lineWidth = 10;
ctx.stroke();
}
</script>
</body>
</html>
这段代码创建了一个Canvas元素，并使用JavaScript代码绘制了一个彩虹。该彩虹由7个圆弧组成，每个圆弧的颜色不同。我们使用beginPath()方法开始绘制路径，然后使用arc()方法绘制圆弧。最后，我们使用stroke()方法将路径绘制到画布上。
原文地址: https://www.cveoy.top/t/topic/Edi 著作权归作者所有。请勿转载和采集!