enchant.js: Step6 – 表示をオシャレにしてみよう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

ここでは, スプライトにグラデーションを付けてオシャレにしてみます.

SAMPLE

サンプルはこちらで見るこができます.

CODE

修正, 追加したコード部分が太字になっています.

/**
 * @scope   ArcSprite.prototype
 */
var ArcSprite = Class.create(Sprite, {
    /**
     * 円弧スプライトクラス
     * @memo    enchant の Sprite クラスを継承
     */
    initialize : function(radius){
        // 親のコンストラクタを呼び出す
        Sprite.call(this, radius*2, radius*2);
        
        // サーフィスを生成
        var surface = new Surface(radius*2, radius*2);
        var c = surface.context;
        
        // サーフィスに円を描画
        var grad = c.createRadialGradient(radius, radius, 0, radius, radius, radius); // グラデーションを生成
        grad.addColorStop(0.0, "rgba(255, 0, 0, 0)");
        grad.addColorStop(0.8, "rgba(255, 0, 0, 1)");
        grad.addColorStop(1.0, "rgba(255, 0, 0, 0)");
        c.fillStyle = grad;
        c.beginPath();
        c.arc(radius, radius, radius, 0, Math.PI*2, true);
        c.fill();
        
        // スプライトにサーフィスをイメージとして登録
        this.image = surface;
    }
});
    

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT