How do I make multiple click responsive canvases in javascript?
Question
The code below is supposed to create 10x10 colored boxes at the tooltip in the canvas it is within, alternating between reddish and bluish on a gray background. I want each canvas to respond to the mouse only when it is within the canvas. The code below makes 4 square gray canvases, but when the mouse is over the leftmost one, colored boxes appear in the rightmost canvas. No other canvases work.
So here are my two questions.
- Why is only one canvas active?
- Why do boxes appear on the wrong canvas?
<!DOCTYPE html> <html> <body> <canvas id="c0" width="201" height="201"></canvas> <canvas id="c1" width="201" height="201"></canvas> <canvas id="c2" width="201" height="201"></canvas> <canvas id="c3" width="201" height="201"></canvas> <script> var colorno = ["#F77", "#077"]; var the = { 'c0': {}, 'c1': {}, 'c2': {}, 'c3': {} }; var box = 10; var workings = function(name) { instance = the[name]; instance.name = name; canvas = instance.canvas = document.getElementById(instance.name); instance.context = canvas.getContext("2d"); instance.index = 0; instance.context.fillStyle = "#777"; instance.context.fillRect(0, 0, canvas.width, canvas.height); scale = (canvas.width - box) / canvas.width; canvas.addEventListener("click", function(e) { instance.context.fillStyle = colorno[++instance.index&1]; instance.context.fillRect(scale*ex-box, scale*ey-box, box, box); }, true); }; for (var key in the) workings(key); </script> </body> </html>
1 answers
solution1
1 ACCPTED 2017-07-07 01:25:15
It is because you didn't declare the variable instance , causing it to be defined in the global scope. instance keeps getting overwrote by your for loop and therefore in all 4 handlers, the instance variables are all pointing to the same object. Correctly declaring a variable in a closure is very important.
var instance = value; // declare function-scoped variable
let instance = value; // declare block-scoped variable
function workings(args){} // declare a function
Here is a version of your code that has been fixed:
<!DOCTYPE html> <html> <body> <canvas id="c0" width="201" height="201"></canvas> <canvas id="c1" width="201" height="201"></canvas> <canvas id="c2" width="201" height="201"></canvas> <canvas id="c3" width="201" height="201"></canvas> <script> var colorno = ["#F77", "#077"]; var the = { 'c0': {}, 'c1': {}, 'c2': {}, 'c3': {} }; var box = 10; // declare function function workings(name) { // declare variables var instance = the[name]; var canvas = instance.canvas = document.getElementById(name); // assign values instance.name = name; instance.context = canvas.getContext("2d"); instance.index = 0; instance.context.fillStyle = "#777"; instance.context.fillRect(0, 0, canvas.width, canvas.height); // attach click listener canvas.addEventListener("click", function(e) { instance.context.fillStyle = colorno[++instance.index&1]; instance.context.fillRect( // calculate correct coordinates e.pageX - canvas.offsetLeft - box / 2, e.pageY - canvas.offsetTop - box / 2, box, box); }, true); }; // invoke function for (var key in the) workings(key); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.