js取色器
时间: 2023-08-06 18:12:49 浏览: 87
你可以使用以下代码来创建一个简单的 JavaScript 取色器:
HTML 代码:
```html
<div id="color-picker"></div>
```
CSS 代码:
```css
#color-picker {
width: 200px;
height: 200px;
border: 1px solid black;
}
```
JavaScript 代码:
```javascript
var colorPicker = document.getElementById("color-picker");
colorPicker.addEventListener("mousemove", function(event) {
var x = event.offsetX;
var y = event.offsetY;
var canvas = event.target;
var context = canvas.getContext("2d");
var pixel = context.getImageData(x, y, 1, 1).data;
var color = "rgb(" + pixel[0] + ", " + pixel[1] + ", " + pixel[2] + ")";
canvas.style.backgroundColor = color;
});
```
这段代码会在 `color-picker` 元素上监听鼠标移动事件。当鼠标移动时,它会获取鼠标位置,然后从画布上获取该位置的像素信息。最后,它会将画布的背景色设置为该像素的颜色。
阅读全文