在canvas中根据鼠标的位置,获取当前点的RGB值

概述

在canvas画布中,我们往往需要获取到某个点的像素颜色,例如我们常见的调色板。今天以官网上提供的方格调色板为例,在此基础上稍微做一下扩展,讲解一下如何根据鼠标的位置获取某个点的RGB值。

效果图

在canvas中根据鼠标的位置,获取当前点的RGB值_第1张图片
可以点击某个方格,然后在下面的小方格中会显示对应的颜色

大致思路

1、这个例子中有两个canvas,大的canvas展示调色板,小的canvas展示用户选取的颜色。
2、大的canvas通过两个for循环、fillStyle和fillRect在小矩形框中渲染颜色
3、通过鼠标的mousedown事件,获取鼠标当前的位置
4、通过getImageData方法和ImageData.data属性获取像素点的RGB值
5、在小矩形框中渲染该颜色。

代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制方格调色板title>
head>
<body>
    <canvas id="canvas" style="border: red 1px dashed">canvas>
    <br>
    <div style="margin-top: 10px">
        <span>当前方格的颜色:span>
        <canvas id="rectCanvas" style="border: aquamarine 1px solid">canvas>
    div>
    <script>
        window.onload = function () {
            let canvasEle = document.getElementById('canvas')
            let ctx = canvasEle.getContext('2d')
            // 设置方格调色板的宽度
            let rectWidth = 30

            // 设置canvas的宽和高
            canvasEle.width = rectWidth * 10
            canvasEle.height = rectWidth * 10
            /**
             * @function 初始化小的矩形框
             * **/
            function initRectCanvas (smallRectWidth) {
                let rectCanvasEle = document.getElementById('rectCanvas')
                rectCanvasEle.width = smallRectWidth
                rectCanvasEle.height = smallRectWidth
            }
            initRectCanvas(rectWidth)

            /**
             * @function 绘制矩形框
             * @param leftTopX {Number} leftTopY {Number} 矩形框左上角的坐标
             * @param width {Number} 矩形框的宽 height {height} 矩形框的高
             * @param color {String} 矩形框的填充色
             * **/
            function drawRect(leftTopX, leftTopY, width, height, color) {
                ctx.fillStyle = color
                ctx.fillRect(leftTopX, leftTopY, width, height)
            }
            // 绘制方格调色板
            for (let i = 0; i < 10; i++) {
                for (let j = 0; j < 10; j++) {
                    let currentColor = 'rgb(' + Math.floor(255 - 25.5 * i) + ', ' + Math.floor(255 - 25.5 * j) + ', 0)'
                    console.log(currentColor)
                    drawRect(j * rectWidth, i * rectWidth, rectWidth, rectWidth, currentColor)
                }
            }

            // 根据鼠标当前的位置,填充小矩形框的颜色
            canvasEle.onmousedown = function (e) {
                // 以canvas的左上角位置为(0, 0)点
                console.log('当前鼠标的位置 x:', e.layerX)
                console.log('当前鼠标的位置 y:', e.layerY)

                // 获取ImageData数据
                let imageData = ctx.getImageData(e.layerX, e.layerY, 1, 1)
                console.log(imageData.data)
                let rectColor = 'rgb(' + imageData.data[0] + ', ' + imageData.data[1] + ',' + imageData.data[2] + ')'
                console.warn(rectColor)
                let rectCanvas = document.getElementById('rectCanvas')
                let rectCtx = rectCanvas.getContext('2d')
                rectCtx.fillStyle = rectColor
                rectCtx.fillRect(0, 0, rectCanvas.width, rectCanvas.height)
            }

        }
    script>

body>
html>

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/API/

你可能感兴趣的:(js,前端,javascript,canvas)