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

最新推荐文章于 2024-09-21 11:29:05 发布

静茹秋叶

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量2.5k

点赞数 1

分类专栏： js 文章标签：前端 javascript canvas

本文链接：https://blog.csdn.net/zhang_cherry/article/details/122501523

版权

js 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

概述

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

效果图

在这里插入图片描述
可以点击某个方格，然后在下面的小方格中会显示对应的颜色

大致思路

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>