前端：改变鼠标点击物体的颜色

用canvas实现图片物体颜色点击变换

原创

已于 2024-12-25 15:06:50 修改 · 537 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-12-25 15:04:51 首次发布

需求：

需要改变图片中某一物体的颜色，该物体是纯色；

鼠标点击哪个物体，哪个物体的颜色变为指定的颜色，利用canvas实现。

演示案例

代码Demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Color Replacement</title>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <input type="color" id="newColor" name="newColor" />
        <canvas id="myCanvas" width="375" height="397"></canvas>
        <script>
            const canvas = document.getElementById('myCanvas');
            const ctx = canvas.getContext('2d', { willReadFrequently: true });

            const img = new Image();
            img.src =
                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAGNCAIAAABlq6bWAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAA0SSURBVHic7d2/lStFFsDhnj3PxcFYb82NgARwIQXIgxjIA1IAlwSIABMPYx0C0BoCnUGjlvrf7bq36vsOxjvwZqbUTP3mdkvqebtcLhNAmH+1XgDQOZUBYqkMEEtlgFgqA8RSGSCWygCxVAaIpTJALJUBYqkMEEtlgFgqA8RSGSCWygCxVAaIpTJALJUBYqkMEEtlgFgqA8RSGSCWygCxVAaIpTJALJUBYqkMEEtlgFgqA8RSGSCWygCxVAaI9an1Atr7/u3fbRfw3eWPtguAUG+Xy6X1Gppp3pc7ckOXBq1Mtr7cCA39GfG6TNrETLnXBtsMV5n82zj/CmGV4SpTgtDQk7EqY/fC+caqTCGCSDcGqox9C00MVJlyZJE+qAwQa5TKmAuglVEqA7SiMkAslQFiqQwQS2WAWCoDxFIZIJbKALFUBoilMkAslQFiqQwQS2WAWCoDxFIZIJbfYEt7//vPf69/+Pz339quhAhmGRq7Jebuz3RDZYBYKkNLH4cX40x/VAaIpTI0Mze2GGc6ozJALJWhjecDi3GmJyoDxFIZkjLOdENlaEBBhqIyQCyV4WzLBxkjTx9