h5实现色阶生成工具的demo
时间: 2023-07-13 07:06:14 浏览: 48
以下是一个基于 HTML5 Canvas 的简单色阶生成工具的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>色阶生成工具</title>
<meta charset="utf-8">
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="256" height="30"></canvas>
<br>
<button id="generate-btn">生成色阶</button>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var generateBtn = document.getElementById('generate-btn');
generateBtn.onclick = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.25, 'yellow');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(0.75, 'cyan');
gradient.addColorStop(1, 'blue');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
};
</script>
</body>
</html>
```
这段代码定义了一个 `<canvas>` 元素和一个生成按钮,当点击生成按钮时,会清空画布并生成一个线性渐变色阶。具体实现是通过 `createLinearGradient()` 方法创建一个线性渐变对象,添加一些色标,然后设置画布的填充样式为该渐变对象,并绘制一个矩形填充整个画布。你可以根据需要修改渐变色阶的颜色和位置。