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

당신은 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

@Joshua - Chrome에서 작동합니다 (데모 참조). 문제가있는 브라우저는 무엇입니까? –

@Joshua - 파이어 폭스라면 그 크기가 작은 캔버스에 드로잉에서 [알려진 버그] (https://bugzilla.mozilla.org/show_bug.cgi?id=564332)가 있습니다. 여기를 해결하는 방법에 대한 질문이 있습니다. http://stackoverflow.com/questions/982000/firefox-throwing-a-exception-with-html-canvas-putimagedata –

incPixel이 예상대로 작동하지 않는 이유는 무엇입니까?

답변

관련 문제