BackgroundCanvas(-webkit-canvas / document.getCSSCanvasContext相当)の機能を実装してみた

js canvas

WebKit の先進的な機能(background: -webkit-canvas) にかなり近い機能 -uu-canvas を実装してました。


<!doctype html><html class="ifnojs"><head><meta charset="UTF-8" /><title></title>
<style>
div.nodebox {
  -uu-background: -uu-canvas(ident) no-repeat;
  width: 600px;
  height: 400px;
  border: 0px none;
}
</style>
<script src="../../uupaa.js"></script>
<script>
function xcanvas() {
  uu.css3.bgcanvas.redraw("ident", draw);
  draw();
}
function draw(redraw) {
  var ctx = uu.css3.bgcanvas("ident", 600, 400),
      i = 0, iz = 10, alpha = 0.5;

  if (ctx) {
    ctx.textBaseline = "top";
    ctx.font = "128pt 'Times New Roman','Arial Black'";
    ctx.fillStyle = "gray";
    ctx.lock(1);
    for (; i < iz; alpha -= 0.05, ++i) {
      ctx.rotate(i * Math.PI / 180);
      ctx.globalAlpha = alpha;
      ctx.fillText("AaZz", 100, 0);
    }
    ctx.unlock();
  }
}
</script>
</head><body>
<div class="nodebox uuautoviewbox5px">
  <p style="font: 64pt 'Times New Roman'">-uu-canvas</p>
</div>
</body></html>

細かいことは → http://handsout.jp/slide/2036

コミット済です。
問題がなければ、次回のリリースから利用可能になります。