お絵かきプログラム

このバージョンはタッチイベントが入っていなかったので、タブレットでは動きません。
修正版をお使いください。
今後こちらのバージョンは修正されません。

Lineスタンプを作りたいなら、専用のソフトがいくつもあるし高機能なのでそちらを使った方が早いです。
では、なぜ、お絵かき用のプログラムの作成にトライするのでしょうか？

このプログラムを使ってみれば判ります。
何と言っても使いにくいのです。

そこで、どこがどう使いにくいのか考えるようになります。
どうすれば解決できるか調べるのです。

「自ら何かをしたい」と思うためには、不便でないといけない。
線の太さを違うように変えたい。画面の大きさを変えたい。
下書きを読み込みたい。
できた絵を他の用途に使いたい。

ここで、注意です。親子でよく話しましょう。
ネットにある画像は著作権があって、勝手に使ってはいけない事も多いです。
人物には肖像権があるので、これも「有名人だから自由に使っていい」も間違いです。
他の人が見て不快になるような、言葉、画像はだめです。

楽しく創作しましょう。

実際にやってみましょう

書いた絵を送ってください。ここで紹介させていただきます。ここでできた画像は透過型pngというものです。自作のハンコを作り、Wordなどにハンコを押してPDF化すれば、偽造は難しいかもしれません。

完成版はこちらになります。コピペして、まずは使いにくさを味わってください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Draw</title>
    <style>

    </style>
  </head>
  <body>

<div style="text-align:center;">
<canvas id="testCanvas" width="320" height="320" style="border:1px solid #CCC;"></canvas>
</div>
<div style="text-align:center;font-size:12px;">
        <input name="mode" type="radio" value="0" id="rb0" onclick="changeLineL(2)"><label for="rb0">細</label>
        <input name="mode" type="radio" value="1" id="rb1" onclick="changeLineL(4)"><label for="rb1">中</label>
        <input name="mode" type="radio" value="2" id="rb2" onclick="changeLineL(6)"><label for="rb2">太</label>
</div>
<div style="text-align:center;font-size:12px;">
<label><input type="color" id="colorBox" value="#CC0000">色の選択</label>
</div>
<div style="text-align:center;font-size:12px;">
  <input type="checkbox" id="mycheckbox" name="scales" ><label for="scales">消しゴム</label>
</div>


<p style="text-align:center;">
        <input type="button" onclick="addImageData();" value="PNG画像作成">
        <input type="button" onclick="clearCanvas();" value="画面をクリア">
    </p>
<div style="text-align:center;">
        <img src="" alt="PNG画像" width="320" height="320" id="image_png" style="border:1px solid #CCC;">
</div>

<script>

draw();
addImageData();
    //
var rb = document.getElementById('rb0');
rb.checked = true;

var cW = 320;   //キャンバス横サイズ
var cH = 320;   //キャンバス縦サイズ
var mouseX;
var mouseY;
var mouseDownFlag = false;  //マウスダウンフラグ
var lineL = 2;  //線の太さ
var EraserMode=0;

var MyColor;
var colorB = document.getElementById('colorBox');
//colorBox.value = "#F0F0F0";

//colorB.value = "#CC0000";
colorB.addEventListener('change', function(){
  MyColor = this.value;
});
//=colorBox.value;

function draw() {
    //キャンバスの初期処理
    var canvas = document.getElementById('testCanvas');
    if ( ! canvas || ! canvas.getContext ) return false;
    //2Dコンテキスト
    var ctx = canvas.getContext('2d');
    ctx.globalCompositeOperation = 'source-over';


    //イベント：マウス移動
    canvas.onmousemove = mouseMoveListner;
    function mouseMoveListner(e) {
        if (mouseDownFlag) {

            //座標調整
            adjustXY(e);
            //円を描く
            ctx.beginPath();
            
            if(EraserMode==0){
                ctx.fillStyle = MyColor;
                ctx.arc(mouseX, mouseY, lineL , 0, Math.PI * 2, false);
            }
            else{
                ctx.clearRect(mouseX, mouseY, lineL ,lineL);
            }
            ctx.fill();
        }
    }
    //イベント：マウスダウン
    canvas.onmousedown = mouseDownListner;
    function mouseDownListner(e) {
        MyColor=colorBox.value;
            var element = document.getElementById('mycheckbox');
                if(element.checked){
                    EraserMode=1;
                }
                else{
                    EraserMode=0;
             }
        mouseDownFlag = true;
    }
    //イベント：マウスアップ
    canvas.onmouseup = mouseUpListner;
    function mouseUpListner(e) {
        mouseDownFlag = false;
    }
    //イベント：マウスアウト
    canvas.onmouseout = mouseOutListner;
    function mouseOutListner(e) {
        mouseDownFlag = false;
    }
    //座標調整
    function adjustXY(e) {
        var rect = e.target.getBoundingClientRect();
        mouseX = e.clientX - rect.left;
        mouseY = e.clientY - rect.top;
    }
}
//画像変換
function addImageData() {
    //キャンバスの初期処理
    var canvas = document.getElementById('testCanvas');
    if ( ! canvas || ! canvas.getContext ) return false;
    try {
        var img_png_src = canvas.toDataURL();
        document.getElementById("image_png").src = img_png_src;
    } catch(e) {
        document.getElementById("image_png").alt = "未対応";
    }
}
//線の太さ
function changeLineL(n) {
    lineL = n;
}

//クリア
function clearCanvas() {
    //キャンバスの初期処理
    var canvas = document.getElementById('testCanvas');
    if ( ! canvas || ! canvas.getContext ) return false;
    //2Dコンテキスト
    var ctx = canvas.getContext('2d');
    
    ctx.clearRect(0, 0, cW, cH);
    //画像描画
    addImageData();
}


</script>
  </body>
</html>

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング >第２時限：美術

2-5: 目指せLineスタンプ・メーカー・メーカー

実際にやってみましょう

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング

X320	X320