ACDLを提唱します。その12

概要

ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
アプリ作ったので、plunkerに上げてみた。

機能

ボタンに使うPNGを生成します。

写真

サンプルコード

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var src = document.getElementById('src');
var a = document.getElementById('download');
function run() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    eval(src.value);    
    var url = canvas.toDataURL("image/png");
    a.setAttribute('href', url);
    a.setAttribute('download', 'canvas.png');
}
function roundRect(x, y, w, h, r) {
    ctx.fillStyle = '#FFF';
    ctx.beginPath();
    ctx.moveTo(x, y + r);
    ctx.lineTo(x, y + h - r);
    ctx.quadraticCurveTo(x, y + h, x + r, y + h);
    ctx.lineTo(x + w - r, y + h);
    ctx.quadraticCurveTo(x + w, y + h, x + w, y + h - r);
    ctx.lineTo(x + w, y + r);
    ctx.quadraticCurveTo(x + w, y, x + w - r, y);
    ctx.lineTo(x + r, y);
    ctx.quadraticCurveTo(x, y, x, y + r);
    ctx.closePath();
    ctx.fill();
}

成果物

以上