HTML5のcanvasを使って文字キャンバスを作りました。
dotinstallのCanvasでお絵かきアプリで作ったものを文字用に改造。
(注)↓これはスクリーンショットなので反応しません。
色は黒、赤の二色にして 線の太さは３種
「一時保存」をクリックするとサムネイルで一時保存されます。
（ページをリロードすると消えます。）
サムネイルをクリックするとダウンロードもできます。
（ブラウザが対応している必要があります。）
マス目はstroke()メソッドで書いて表示するプログラムなので
太線で書いた後、消去するとマス目線が太線になってしまいます。
細い線で引き直す設定にすると今度は選択した線の太さが「細」に戻って
しまうので、多少のご不便ご容赦ください。
細くしたい場合はリロードしてください。
プログラムはこうです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>文字用キャンバス</title>
<style>
#mycanvas{
border: 10px solid #999;
cursor: crosshair;
}
.thumbnail{
border: 2px solid #999;
margin-right: 5px;
}
</style>
</head>
<body>
<p>
<select id="penColor">
<option value="black">黒</option>
<option value="red">赤</option>
</select>
<select id="penWidth">
<option value="1">細</option>
<option value="3">中</option>
<option value="5">太</option>
</select>
<input type="button" id="erase" value="消去">
<input type="button" id="save" value="一時保存">
</p>
<canvas width="290" height="292" id="mycanvas">
Canvasに対応したブラウザを用意してください。
</canvas>
<div id="gallery"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var canvas=document.getElementById('mycanvas');
if(!canvas||!canvas.getContext)
return false;
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(150,0);
ctx.lineTo(150,300);
ctx.moveTo(0,150);
ctx.lineTo(300,150);
ctx.strokeStyle="silver";
ctx.stroke();
var startX,
startY,
x, y,
borderWidth=10,
isDrawing=false;
$('#mycanvas').mousedown(function(e){
isDrawing=true;
startX=e.pageX-$(this).offset().left-borderWidth;
startY=e.pageY-$(this).offset().top-borderWidth;
})
.mousemove(function(e){
if(!isDrawing) return;
x=e.pageX-$(this).offset().left-borderWidth;
y=e.pageY-$(this).offset().top-borderWidth;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(x,y);
ctx.strokeStyle="black";
ctx.stroke();
startX=x;
startY=y;
})
.mouseup(function(){
isDrawing=false;
})
.mouseleave(function(){
isDrawing=false;
});
$('#penColor').change(function() {
ctx.strokeStyle=$(this).val();
});
$('#penWidth').change(function() {
ctx.lineWidth=$(this).val();
});
$('#erase').click(function () {
if(!confirm('本当に消しますか？')) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(150,0);
ctx.lineTo(150,300);
ctx.moveTo(0,150);
ctx.lineTo(300,150);
ctx.strokeStyle="silver";
ctx.stroke();
});
$("#save").click(function(){
var img=$('<img>').attr({
width:50,
height:50,
src:canvas.toDataURL()
});
var link=$('<a>').attr({
href:canvas.toDataURL().replace('image/png','application/octet-stream'),
download:new Date().getTime()+'.png' });
$('#gallery').append(link.append(img.addClass('thumbnail')));
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(150,0);
ctx.lineTo(150,300);
ctx.moveTo(0,150);
ctx.lineTo(300,150);
ctx.strokeStyle="silver";
ctx.stroke();
});
});
</script>
</body>
</html>
リンクバナーをサイト上に表示
副ウィジェットのテキストを使う
別ウィンドウで開くほうが使い易いので
<a class="banner" href ="http://penjimiti.com/moji-canvas.html" target="_blank">
バナーのリンクにtarget=”_blank”追加
ウィンドウの左端に表示されますので、小さくして使ってください。
