shi3z's はてなblog

カップヌードルがごはんになったことに驚く35歳

48ピクセル罫シールを作った

 48ピクセル幅の罫線を引くシールを作ってみた。
 Skylabにも公開してるけど、ソースを弄りたい人は→ここ

f:id:shi3z:20140420084344j:image

 

 S-II以前にもこういうシールは存在していたんだけど、それはStrokeを直接弄るやり方だった。

 けど、S-IIではHTML5Canvasに描いたものを背景のビットマップとして保存できるので、こっちのほうが処理が軽い。消しゴムでも消えないし(一時的に消えるけど、すぐ復帰する)。

 

importJS(["lib/MOON.js"], function() {  
    var sticker = Sticker.create();  
    sticker.ontap = function() {
   		//canvasを作る
        var y, x, 
            page = MOON.getCurrentPage(),
            backing = MOON.getPaperJSON(page.backing),
            canvas = document.createElement('canvas'),
            width = canvas.width = backing.width,
            height = canvas.height = backing.height,
            ctx = canvas.getContext('2d');
	
		//罫線を描画
        ctx.strokeStyle = '#555555';
        
        gap = 48; 
        for(y=50;y<1024;y+=gap){
        	
        	ctx.moveTo(0,y);
        	ctx.lineTo(768,y);
        }
        
        ctx.stroke();
        
        //canvasをページの背景に
 		MOON.setPageImage(canvas);
        MOON.finish(); 
    };  
    sticker.onattach = function() {  
        MOON.finish();  
    };  
    sticker.ondetach = function() {  
        MOON.finish();  
    };  
    sticker.register();  
});

 文字を書く時にはやっぱり罫線があったほうがずっといいよね