以前, 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. で紹介した 魔法陣のサンプル.

このサンプルの色違いを色々と作ってみました.

Table of contents

• もともとのサンプル
• 一箇所修正するだけ
• tmlib.js examples – Magic Square(Red)
• tmlib.js examples – Magic Square(Green)
• tmlib.js examples – Magic Square(Blue)
• tmlib.js examples – Magic Square(Random)

もともとのサンプル

up

一箇所修正するだけ

魔法陣クラス MagicSquareSprite で定義されている rendererCanvas メソッドの fillStyle と strokeStyle に指定している “hsl(60, 75%, 50%)”.

この値を変更するだけで魔法陣の色を変更することができます.

    rendererCanvas: function() {
        var canvas = this.canvas;
        
        canvas.setTransformCenter();
        canvas.fillStyle  = "hsl(60, 75%, 50%)";
        canvas.strokeStyle= "hsl(60, 75%, 50%)";

up

tmlib.js examples – Magic Square(Red)

up

tmlib.js examples – Magic Square(Green)

up

tmlib.js examples – Magic Square(Blue)

up

tmlib.js examples – Magic Square(Random)

up