鍍金池/ 問答/HTML5  HTML/ js如何自動獲取指定像素的顏色

js如何自動獲取指定像素的顏色

以下代碼為鼠標(biāo)點擊某點獲取顏色，如何改為自動獲取像素為X,Y=1,1的顏色？

<head>
<style>
body {
    text-align:center;
}
.info {
    text-align:center;
    font-size:36px;
    line-height:36px;
}
#cursor{
    position:absolute;
    display:none;
    height:11px;
    width:11px;
    background:url(images/cursor.png);
}
</style>
</head>

<body>
<canvas id="canvas" width="400px" height="286px">Sorry, your browser dose not support canvas.</canvas>
<hr />
<div class="info" id="currentColor">點擊上面的canvas來查看效果</div>
<div id="cursor"></div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://www.jq22.com/demo/getcanvaspixelcolor20151227/getcanvaspixelcolor.js" type="text/javascript"></script>
<script type="text/javascript">
var draw = function(img) {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.shadowBlur = 20;
    context.shadowColor = "#000000";
    context.drawImage(img, 0, 0);

    canvas = $("#canvas");
    canvas.click(function (e) {
        var canvasOffset = canvas.offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        var colorData = document.getElementById("canvas").getPixelColor(canvasX, canvasY);
        // 獲取該點像素的數(shù)據(jù)
        console.log(colorData);
        var color = colorData.rgba;
        $("body").css("backgroundColor", color);
        $("#currentColor").html("當(dāng)前像素(" + canvasX + "," + canvasY + ")顏色為: " + color);
        var cursorX = (e.pageX - 5) + "px";
        var cursorY = (e.pageY - 5) + "px";
        $("#cursor").stop(true, true).css({
            "display" : "inline-block",
            "left" : cursorX,
            "top" : cursorY
        }).fadeOut(2500);
    });
}
$(document).ready(function () {
    var img = new Image();
    img.src = "images/demo.jpg";
    $(img).load(function () {
        draw(img);
    });
});
</script>
</body>
回答
編輯回答
不舍棄
var draw = function(img) {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.shadowBlur = 20;
    context.shadowColor = "#000000";
    context.drawImage(img, 0, 0);

    var colorData = canvas.getPixelColor(1, 1); // 獲取x=1,y=1像素處的顏色
    var color = colorData.rgba;
    $("body").css("backgroundColor", color);
    $("#currentColor").html("當(dāng)前像素(1, 1)顏色為: " + color);
}
$(document).ready(function () {
    var img = new Image();
    img.src = "images/demo.jpg";
    $(img).load(function () {
        draw(img);
    });
});
2017年10月23日 14:44