月別アーカイブ: 2016年5月

ひらがな手本まとめ

やっぱり仮名に難有りというのがハッキリしてきましたので
ここらで改めて仮名を見直そうということで今までの手本をまとめてみました。

上から
和田康子(楷書)
箕輪東壽(楷書)
和田康子(行書)
上條信山
田中鳴舟
山下静雨
石川芳雲
金久保雲渓(2種)
(敬称略)

ひらがな手本 ひらがな手本 ひらがな手本 ひらがな手本 ひらがな手本 ひらがな手本

上條先生から金久保先生は楷書、行書を区別してません。

そもそも かなは漢字の草書体なんで
かな楷書というのが無理ありますよね。

金久保先生は書く文字ごとに表情がかわるので
2種ピックアップしました。

田中、山下両先生の字は同一人物かと思うくらい似てます。

「ま」で縦棒が中心を通るのと右寄りになる字があるのが
ちょっと気になる程度で、特に発見はなかったですが
サンプル少ない「ゑ」と「ゐ」が集められたので良かった。

ボールペン SARASA CLIP 0.5

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

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”追加

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

五段への道 4. 短歌(草仮名 散らし書き可)

短歌 北原白秋 行書体
(草書体  草仮名  散らし可)

「風たちてこまかに落つる竹の葉は日の照る方へみなちらふなり」

今回は短歌ということで比較的近代のものなんですよね

草仮名 散らし書きもOKなんですが、古今集みたいに草仮名使いまくるのも
どうなんだろうと思いつつ、とりあえずやってみます。

一応草仮名含めて集字

ペン字 北原白秋

まずは2行で

ペン字 北原白秋

印刷どおり、草仮名も使わず 「みなちらふなり」の処理が難しそう。

次は4行で

ペン字 北原白秋 4行

4行目が平仮名ばかりになるので「ち」を「散」に

最後はできるんだったら草仮名、散らし全部やってみよう

ペン字 北原白秋 散らし

ありゃりゃバランス悪いなあ ここにアップしてみて初めて気づいた。
PC画面でみると客観視できていいねえ。

う〜〜〜〜〜〜〜ん

4行あたりが無難かなあ

前回2行だったんで、もう少し大きな字が書きたいし

散らしは今後やるチャンスなさそうなんで
やりたい気持ちもあるんですけどね

4行のブラッシュアップを基本に、散らしの可能性を伺う感じでいきます。

5月の検定はあと10日ほどしかないんで
勝算低いでしょうから今回は見送ります。
手数料込みで5千円弱は結構痛いですからね。

ペン字のイラスト