このFireworks PNGファイルを変換↓。
Fw to Canvas test1 – jsdo.it – share JavaScript, HTML5 and CSS
iPhone、AndroidなどでCSS3で噴出しを作っていたのですが、Androidでボーダーの角丸がジャギって残念だったのでCanvasで手軽に描画したいな、ということでコマンドを書いてみました。
只今ベータ版として公開しています。フィードバックいただけるとありがたいです。
対応してるもの：
・パス形状（複合パス可）
・線（基本の角、丸どちらか、ストロークのインキの量で不透度に対応）
・塗り（ベタ塗り、グラデーションの線形・円形）
・オブジェクトの不透明度
制限：
・テキスト、ビットマップ、テクスチャ、パターン、フィルタ類、シンボル不可。
・グループ化されているものは分解してください。長方形や、星型などのシェイプもパスに分解してください。
・塗り単体の透明度の変更には対応していません。オブジェクトの不透明度で調整してください。この時、太い線を使っていると思ったとおりの結果にならないことがあります。塗りの透明度を使う場合は同時に太い線を使わないほうがいいかもしれません。
・ストローク（線）の内側の整列と外側の整列には対応していません。破線などは使えません。
使い方：
・下記のファイルダウンロードしてを開いてコマンドを実行してください。
export_canvas.jsf
・選択したオブジェクトがCanvasのコードに変換されクリップボードにコピーされます。
以下のようなHTMLを作り適宜ペーストしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>canvas</title>
<style>
#cv{border:1px solid #ccc;}
</style>
<script>
function init() {
var cv = document.getElementById("cv");
if (cv.getContext) {
var ctx = cv.getContext('2d');
draw(ctx);
}
}
function draw(ctx) {
//ここにコードをペーストして下さい。
}
</script>
</head>
<body onLoad="init()">
<canvas id="cv"></canvas>
</body>
</html>
illustratorでは有名なプラグインがあります。Ai to Canvas Plug-In
わりとお手本にして作っています。
Windows XP sp3 Fireworks CS5で動作確認しています。