文字用キャンバス作りました。

HTML5のcanvasを使って文字キャンバスを作りました。

dotinstallのCanvasでお絵かきアプリで作ったものを文字用に改造。

(注)↓これはスクリーンショットなので反応しません。

ペン字用キャンバス

色は黒、赤の二色にして 線の太さは3種

「一時保存」をクリックするとサムネイルで一時保存されます。
(ページをリロードすると消えます。)

サムネイルをクリックするとダウンロードもできます。
(ブラウザが対応している必要があります。)

マス目は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”追加

ウィンドウの左端に表示されますので、小さくして使ってください。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA