Hatena::Groupsubtech

ういはるかぜの化学

Friday, March 25, 2011

[]-webkit-canvas / getCSSCanvasContext() 02:31 -webkit-canvas / getCSSCanvasContext() - ういはるかぜの化学 を含むブックマーク はてなブックマーク - -webkit-canvas / getCSSCanvasContext() - ういはるかぜの化学

WebKitにはCSSbackgroundなどのURL指定の代わりにCanvasを指定する(つまり任意の描画が可能)機能があるんですね。

Safari CSS Reference: CSS Property Functions

何で気づいたのかといえば、Chromeの近頃のバージョンではXMLを表示したときIEとかFirefoxたいにツリー表示してくれるようになっています。で、そこのツリーを開いたり閉じたりする三角はどうなってるんだろうと見たらなにやらわざわざ描いてました。なんでわざわざ。

f:id:mayuki:20110326022548p:image

.collapse-button {
    background-image: -webkit-canvas(arrowDown);
    height: 10px;
}

.expand-button {
    background-image: -webkit-canvas(arrowRight);
    height: 11px;
}
function drawArrows()
{
    var ctx = document.getCSSCanvasContext("2d", "arrowRight", 10, 11);

    ctx.fillStyle = "rgb(90,90,90)";
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 8);
    ctx.lineTo(7, 4);
    ctx.lineTo(0, 0);
    ctx.fill();
    ctx.closePath();

    var ctx = document.getCSSCanvasContext("2d", "arrowDown", 10, 10);

    ctx.fillStyle = "rgb(90,90,90)";
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(8, 0);
    ctx.lineTo(4, 7);
    ctx.lineTo(0, 0);
    ctx.fill();
    ctx.closePath();
}

なんでdataスキームとかSVGじゃダメだったのだろうとか。▲をtransformするとか…。いやべつにこだわりませんが。

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20110325