javascript - Painting Cells in Grid -
I have an installation of JSFDial here. I am pulling a canvas grid and want to allow a user to select a color and grid cells like 'pixel art'. Can anyone point me in the right direction?
var c_canvas = document.getElementById ("c"); Var reference = c_canvas.getContext ("2D"); For (var x = 0.5; x & lt; 501; x + = 20) {context.moveTo (x, 0); Context.lineTo (x, 381); } For (var y = 0.5; y & lt; 381; y + = 20) {context.moveTo (0, y); Context.lineTo (500, Y); } Context.strokeStyle = "#ddd"; Context.stroke ();
OK, it should take you closer.
function getMousePos (canvas, EVT) {var rect = canvas.getBoundingClientRect (); Return {x: evt.clientX - rect.left, y: evt.clientY - rect.top}; } Function getNearestSquare (status) {var x = position.x; Var y = position.y; If (x & lt; 0; y and lieutenant; 0) returns empty; X = (Math.flur (x / 20) * 20) + 0.5 y = (Math Flower (y / 20) * 20) + 0.5 returns {x: x, y: y}; } $ (C_canvas) .click (function (evt) {var pos = getNearestSquare (getMousePos (c_canvas, evt); if (pause! = Null) {context.fillStyle = "# FF0000"; context.fillRect (pos.x , Pos.y, 20,20);}}); I tried to do this on your Bella, adding this JS code has given you a click event that gives you an area of size and color of one of its squares Press, you just
Edit: I've added the logic to find the top left.
Comments
Post a Comment