鼠标点击获取并修改canvas上的颜色值示例代码-html代码-BFW代码库

鼠标点击获取并修改canvas上的颜色值示例代码

代码语言：html

所属分类：其他

代码描述：鼠标点击获取并修改canvas上的颜色值示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <title>获取和修改Canvas上的像素值</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400" style="border:1px solid black;"></canvas>

    <script>
        // 获取Canvas元素
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // 绘制一个简单的示例图形
        ctx.fillStyle = "blue";
        ctx.fillRect(50, 50, 100, 100);

        // 添加鼠标点击事件监听器
        canvas.addEventListener("click", function (event) {
            // 获取鼠标点击位置的像素坐标
            var x = event.offsetX;
            var y = event.offsetY;

            // 获取该像素的颜色值
            var imageData = ctx.getImageData(x, y, 1, 1);
            v.........完整代码请登录后点击上方下载按钮下载查看