以下の HTML ファイルを Web サーバーに配置するだけで実現可能です
<script>addEventListener('DOMContentLoaded',function(ev){ _=0;
function subs(f){return [].slice.call(arguments,1).reduce(function(s,v){return s.replace(/%/,v)}, f)}
function range(n){return Array.apply(null,new Array(n)).map(function(v,i){return i})}
function drawVision(name, role, font, imga) {
var pane = document.getElementById('vision');
var CX = pane.width/2, CY = pane.height/2;
var R = Math.sqrt(pane.width*pane.width + pane.height*pane.height) / 2 - 5;
var M = R/10;
var PW = pane.width - M*2|0, PH = pane.height - M*2|0;
var ctx = pane.getContext('2d');
ctx.clearRect(0,0, pane.width,pane.height);
// 枠
var points = range(18).map(function(i){return Math.PI*i/9}).map(function(s){return [CX+R*Math.sin(s), CY-R*Math.cos(s)]});
ctx.beginPath();
points.forEach(function(p){points.forEach(function(q){ctx.moveTo(p[0],p[1]),ctx.lineTo(q[0],q[1])})});
ctx.shadowBlur = 0; ctx.lineWidth = 1; ctx.strokeStyle = 'navy'; ctx.stroke();
// 角丸箱
function plotRoundBox(x,y, w,h, r) {
var s = Math.PI/2;
ctx.beginPath();
ctx.arc(x+w-r, y+h-r, r, s*0, s*1, false);
ctx.arc(x+0+r, y+h-r, r, s*1, s*2, false);
ctx.arc(x+0+r, y+0+r, r, s*2, s*3, false);
ctx.arc(x+w-r, y+0+r, r, s*3, s*4, false);
ctx.closePath();
return ctx;
}
ctx.fillStyle = 'white'; ctx.shadowBlur = M; ctx.shadowColor = 'navy';
plotRoundBox(M,M, PW,PH, M/2).fill();
ctx.shadowBlur = 0;
// テロップ
function plotTelop(){
var x = CX, y = M + PH - M, yy = y - M*1.5, w = PW - M;
var fx = ((font.indexOf(' ') >= 0)? subs('"%"', font): font) + ',serif';
ctx.fillStyle = 'white';
ctx.strokeStyle = 'rgba(0,0,0,0.7)'; ctx.lineWidth = 2;
ctx.shadowBlur = 10; ctx.shadowColor = 'black';
ctx.textAlign = 'center'; ctx.textBaseline = 'ideographic';
if (role) {
ctx.font = subs('%px %', M/2, fx);
ctx.strokeText(role, x,yy, w);
ctx.fillText(role, x,yy, w);
}
if (name) {
ctx.font = subs('%px %', M, fx);
ctx.strokeText(name, x,y, w);
ctx.fillText(name, x,y, w);
}
ctx.shadowBlur = 0;
}
// 画像
if (imga) {
var img = new Image();
img.src = imga;
img.onload = function(){
var iw = img.width, ih = img.height;
var zw = PW/iw, zh = PH/ih;
var sx = 0, sy = 0, sw = iw, sh = ih;
if (zw < zh) { sx = (iw-PW/PH*ih)/2|0, sw = PW/PH*ih; }
if (zw > zh) { sy = (ih-PH/PW*iw)/2|0, sh = PH/PW*iw; }
ctx.save();
plotRoundBox(M,M, PW,PH, M/2).clip();
ctx.drawImage(img, sx,sy,sw,sh, M,M,PW,PH);
ctx.restore();
plotTelop();
};
} else {
plotTelop();
}
}
// 描画ボタン
document.forms['teloparg'].addEventListener('submit',function(fev){
fev.preventDefault();
var es = fev.target.elements;
var role = es['ro'].value;
var name = es['na'].value;
var font = es['fo'].value; if(!font) font = 'serif';
var imga = es['im'].value;
if (name) drawVision(name, role, font, imga);
var a = fev.target.querySelector('a');
a.href = window.location.href.replace(/\?.+$/,'')+subs('?ro=%&na=%&fo=%&im=%', role, name, font, imga);
a.textContent = a.href;
},false);
// 外部リンクより
var args = window.location.search;
if (args) {
var a = {}, m, re = /[\?&](\w+)=([^&]+)/g;
while (m = re.exec(args)) a[m[1]] = decodeURI(m[2]);
var es = document.forms['teloparg'].elements;
for (var i in a) if(es[i]) es[i].value = a[i];
if (a.na) drawVision(a.na, a.ro, a.fo, a.im);
}
},false)</script>
<form name=teloparg><dl>
<dt>肩書<dd><input name=ro value='清国欽差大臣 兼 両広総督'>
<dt>名前<dd><input name=na value='林 則徐'>
<dt>書体<dd><input name=fo value='sans-serif'>
<dt>画像URL<dd><input name=im value='./lin_zexu.jpg'>
<dt><dd><button type=submit>描画</button>
<dt>外部リンク<dd><a></a>
</dl></form>
<canvas id=vision width=400 height=640>要 HTML5 処理系</canvas>
