素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

いろんなサイトに落書きするブックマークレット

FirefoxOperaWebKitで確認。けっこう楽しい。

javascript:(function(){
  var canvas = document.createElement("canvas");
  canvas.width = Math.max(document.documentElement.scrollWidth, window.innerWidth);
  canvas.height = Math.max(document.documentElement.scrollHeight, window.innerHeight);
  canvas.style.position = "absolute";
  canvas.style.top = "0";
  canvas.style.left = "0";
  canvas.style.zIndex = "9999";
  document.body.appendChild(canvas);
  var context = canvas.getContext("2d");
  var drawing = false;
  var point = {
    x: null,
    y: null
  };
  canvas.addEventListener("mousedown",
    function(e){
      e.preventDefault();
      drawing = true;
      point.x = e.clientX - window.pageXOffset;
      point.y = e.clientY + window.pageYOffset;
    }, false);
  canvas.addEventListener("mouseup",
    function(e){
      e.preventDefault();
      drawing = false;
      point.x = null;
      point.y = null;
    }, false);
  canvas.addEventListener("mousemove",
    function(e){
      e.preventDefault();
      if(!drawing) return;
      context.beginPath();
      context.moveTo(point.x, point.y);
      context.lineTo(point.x = e.clientX - window.pageXOffset, point.y = e.clientY + window.pageYOffset);
      context.closePath();
      context.stroke();
    }, false);
  context.strokeStyle = "black";
  context.lineCap = "round";
  context.lineJoin = "round";
  context.lineWidth = 3;
})();

関連:mousemoveイベントの発行タイミングとドラッグ - 素人がプログラミングを勉強するブログ