見てるページにお絵描き

by jdg 2010-05-28 [2010/05/28 15:39:04]

ドラッグで描画。マウスは遅く動かした方が良いです。

• /*
   * @title 見てるページにお絵描き
   * @description マウスは遅く動かした方が良い
   * @include http://*
   * @license MIT License
   */
  
  (function() {
    var canvas = document.createElement('canvas');
    canvas.id = 'letGeneratedCanvas';
    canvas.width = document.width;
    canvas.height = document.height;
    canvas.style.position = 'absolute';
    canvas.style.top = canvas.style.left = '0';
    canvas.style.zIndex = '999';
    document.body.appendChild(canvas);
    canvas = document.getElementById('letGeneratedCanvas');
    var ctx = canvas.getContext('2d');
    var mousedown = 0;
    var stroke = function(e) {
      ctx.beginPath();
      ctx.arc(e.pageX, e.pageY, 5, 0, Math.PI*2, false);
      ctx.fill();
    };
    canvas.addEventListener('mousemove', function(e) {
      if (mousedown) {
        stroke(e);
      }
    }, false);
    canvas.addEventListener('mousedown', function() {
      mousedown = 1;
    }, false);
    canvas.addEventListener('mouseup', function() {
      mousedown = 0;
    }, false);
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。