07 03 2011 javascript 家庭菜園 Tweet
毎度Photoshopをいじるのも面倒なのでcanvasで出来るようにしてみた。
html
<html lang="ja"> <head> <title>Allotment</title> <style type="text/css"> canvas { border: 1px solid #999; } </style> </head> <body> <canvas id="allotment" width="500" height="500"></canvas> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="allotment.js"></script> </body> </html>
js
$(document).ready(function() { var cv, ctx; var allotment_data = [ {name:"なにもうえてない", x:10, y:10, width:480, height:120, color:"#CCCCCC"}, {name:"浅葱", x:10, y:140, width:140, height:120, color:"#66CC66"}, {name:"ニンニク", x:160, y:140, width:80, height:120, color:"#993300"}, {name:"春菊", x:250, y:140, width:80, height:120, color:"#339933"}, {name:"ジャガイモ", x:340, y:140, width:150, height:120, color:"#CC6600"}, {name:"ソラマメ", x:10, y:340, width:70, height:150, color:"#339933"}, {name:"エンドウ", x:10, y:270, width:70, height:60, color:"#339933"}, {name:"ジャガイモ", x:90, y:270, width:400, height:110, color:"#CC6600"}, {name:"ミョウガ", x:90, y:390, width:400, height:100, color:"#CC9966"} ]; initCanvas(); drawCanvas(); function initCanvas () { cv = $("#allotment").get(0); if (!cv) { return; } ctx = cv.getContext('2d'); if (!ctx) { return; } } function drawCanvas () { var alt; ctx.save(); ctx.font = "20px";; for(index=0; index<allotment_data.length; index++){ alt = allotment_data[index]; ctx.fillStyle = alt.color; ctx.fillRect( alt.x, alt.y, alt.width, alt.height); ctx.fillStyle = "#000"; ctx.fillText(alt.name, 12 + alt.x, 32 + alt.y); } ctx.restore(); } });
まぁまぁの出力
区画のデータはSQLiteかなんかで管理してJSONで取り出せるようにしよう。