HTML5 Canvas の beginPath() とか stroke() とかがちょっと面倒なので、Canvas をサクッと使える簡易ライブラリ(TwnCanvas) を一部機能のみですが作ってみました。
下記のような感じで利用できます。
<script src="./lib/twn-canvas-1.0.0.js"></script> <canvas id="cv1" width="800" height="300"></canvas> <script> var x = y = 100; var w = h = 80; var cv = new TwnCanvas("cv1") cv.setOffset(30, 30) .setColor('#669') .setFont('14px Consolas') .setLineWidth(3) .setDash([]) .setBgColor('transparent') .box(x*0, y*0, w, h) .box(x*1, y*0, w, h, {color:'#060', lineWidth:2, bgColor:'#cfc', dash:[2, 4], text:'Box'}) .circle(x*2+w/2, y*0+h/2, w/2) .circle(x*3+w/2, y*0+h/2, w/2, {color:'#060', lineWidth:2, bgColor:'#cfc', dash:[2, 4], text:'Circle'}) .ellipse(x*4+w/2, y*0+h/2, w/2, w/4) .ellipse(x*5+w/2, y*0+h/2, w/2, w/4, {color:'#060', lineWidth:2, bgColor:'#cfc', dash:[2, 4], text:'Ellipse'}) .line(x*0, y, w, h) .line(x*1, y, w, h, {color:'#060', lineWidth:2, dash:[2, 4], text:'Line', top:12}) .arrow(x*2, y, w, h) .arrow(x*3, y, w, h, {color:'#060', lineWidth:2, dash:[2, 4], text:'Arrow', top:12}) .path([x*4, y, x*4+w/2, y+h/2, x*4, y+h, x*4+w, y+h]) .path([x*5, y, x*5+w/2, y+h/2, x*5, y+h, x*5+w, y+h], {color:'#060', lineWidth:2, dash:[2, 4], text:'Path', top:8, left:20}) .text('Text', x*0, y*2+h/2) .text('Text', x*1, y*2+h/2, {color:'#060', font:'20pt "Times New Roman"'}) .image('../image/ki2.gif', x*2, y*2) .image('../image/ki2.gif', x*3, y*2, w/2, h/2) </script>