α-wwwiki

user:none (1852 bytes)

_h1 pencil & [[paint]]

{canvas {@ id="canvasjs" width="570" height="300" style="border:1px solid black; box-shadow:0 0 8px black;"}}

{div {@ style="width:500px;"} 
grid : {input 
       {@ id="grid" type="text" value="10"  
           style="background:#ccc; width:30px; text-align:center;"}}}

{hr}
{input {@ type="submit" value="init pencil" onclick="°°

var initpencil = (function () {
  var canvas = getId('canvasjs');
  var ctx = canvas.getContext('2d');
  var grid = getId('grid').value;
  var x, y;
  ctx.fillStyle = 'black';
  ctx.beginPath();

var mousegrid = function ( e ) {
    var coords = mousepos(e);
    x = Math.round( coords.x/grid)*grid; 
    y = Math.round( coords.y/grid)*grid;
    return {x:x, y:y};
  };

canvas.onmouseover = function(e) {
    canvas.style.cursor = 'crosshair';
  }

canvas.onmouseout = function(e) {
    canvas.style.cursor = 'default';
  }

canvas.onmousedown = function(e) {
    grid = getId('grid').value;
    var coords = mousegrid(e);
    ctx.moveTo(coords.x, coords.y);
  };

canvas.onmousemove = function(e) {
    if (x == null || y == null) return;
    var coords = mousegrid(e);
    ctx.lineTo(coords.x, coords.y);
    ctx.stroke();
    ctx.moveTo(coords.x, coords.y);
  };

canvas.onmouseup = function(e) {
    x = y = null;
  };

})();

°°"}}