<!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>
ответ
Вы пропускаете параметр типа контекста из getContext()
, он должен быть:
var context = canvas.getContext('2d');
Спасибо, я только что заметил. Но результат для меня все тот же. – lowerkey
@Joshua - работает в Chrome (см. Демонстрацию), в каком браузере у вас есть проблемы? –
@Joshua - Если это firefox, это [известная ошибка] (https://bugzilla.mozilla.org/show_bug.cgi?id=564332) от рисования на холсте, который меньше. Есть вопрос, как обходиться здесь: http://stackoverflow.com/questions/982000/firefox-throwing-a-exception-with-html-canvas-putimagedata –
Что вы ожидаете? :) – roman