incPixel为什么不按预期工作？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta lang="EN" /> 

    <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
    <script type="text/javascript"> 

// Don't resize the window  

function _(str){ 
    return document.getElementById(str); 
} 

function incPixel(imageData, x, y){ 
    var index = (x + y * imageData.width) * 4; 
    imageData.data[index + 0] = 155; 
    imageData.data[index + 1] = 155; 
    imageData.data[index + 2] = 155; 
    imageData.data[index + 3] = 155; 
} 

$(document).ready(function(){ 
    // collect mouse position data 
    var history = []; 
    $(document).mousemove(function(e){ 
history.push([e.pageX, e.pageY]); 
    }); 

    // when the button is clicked 
    $("#button").click(function(){ 
// 1. disable mouse position data collection 
$(document).unbind("mousemove"); 

// 2. draw pixels on the canvas 
var width = $(document).width(); 
var height = $(document).height(); 

$("#canvas").height(height).width(width); 

var canvas = document.getElementById("canvas"); 

if(canvas.getContext){ 
    var context = canvas.getContext("2d"); 

    var imageData = context.createImageData(width, height); 

    for(var i=0; i<history.length; i++){ 
     incPixel(imageData, history[i][0], history[i][1]); 
    } 

    context.putImageData(imageData, 0, 0); 
    alert(JSON.stringify(history)); 
}else{ 
    alert("no context"); 
} 
    }); 
}); 

    </script> 
    </head> 

    <body> 
    <h1>Hello, Worlds!</h1> 
    <div id="width"></div> 
    <div id="height"></div> 
    <input type="button" id="button" value="Click me" /><br /> 

    <canvas id="canvas" /> 
    </body> 
</html>

来源

2011-01-09 lowerkey

你期望什么？ :) – roman 2011-01-09 12:32:47

你错过了从getContext()上下文类型的参数，它应该是：

var context = canvas.getContext('2d');

You can test out a demo here with only the change above。

来源

2011-01-09 12:32:29

谢谢，我只是注意到。但结果对我来说还是一样的。 – lowerkey 2011-01-09 12:33:14

incPixel为什么不按预期工作？

回答

相关问题