Canvasで作るお絵かきアプリ

20136 ワード
canvas JavaScript JavaScript テキストリンク

この記事はtomowarkar ひとりAdvent Calendar 2019の14日目の記事です。

はじめに

昔に描いたコードを持ってきたので、コードが少し古く、初心者感丸出しですがご容赦を。

スマートフォンに対応させたのがポイントです。

デモサイト

デモサイト

コード全文

index.html

  • 描画エリア設定
  • カラーパッド設定
  • 削除ボタン設定
<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <title></title>
    </head>
    <body>
        <div id="hitarea"><canvas id="canvas"></canvas></div>
        <input type="color" id="color" value="#ff7f7f">
        <input type="button" id="removePaint" value="clear" onclick="removePaint()">
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</html>

style.css

style.css
body {
    margin: 0;
    overflow: hidden;
}
#color{
    position: absolute;
    margin: 0;
    width: 54px;
    height:58px;
    right: 10px;
    bottom: 60px;
    border: none;
    background: none;
}
#removePaint{
    position: absolute;
    margin: 0;
    width: 50px;
    height:50px;
    right: 15px;
    bottom: 10px;
    background: lightgray;
}

script.js

script.js
var canvas = document.getElementById( 'canvas' );
var ctx = document.getElementById("canvas").getContext("2d");
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

function drawCoordinates(x,y,mouseX,mouseY){
    ctx.beginPath();
    ctx.moveTo(mouseX, mouseY);
    ctx.lineTo(x, y);
    ctx.lineCap = "round";
    ctx.lineWidth = 10;
    ctx.strokeStyle = defocolor;
    ctx.closePath();
    ctx.stroke();
    mouseX = x;
    mouseY = y;
}

var $document = $(document);
var $hitarea = $('#hitarea');
var $x = $('#x');
var $y = $('#y');
var supportTouch = 'ontouchend' in document;// タッチイベントが利用可能かの判別

var EVENTNAME_TOUCHSTART = supportTouch ? 'touchstart' : 'mousedown';
var EVENTNAME_TOUCHMOVE = supportTouch ? 'touchmove' : 'mousemove';
var EVENTNAME_TOUCHEND = supportTouch ? 'touchend' : 'mouseup';

var mouseX = "";
var mouseY = "";

var updateXY = function(event) {
    var original = event.originalEvent;
    var x, y;
    if(original.changedTouches) {
        x = original.changedTouches[0].pageX;
        y = original.changedTouches[0].pageY;
    } else {
        x = event.pageX;
        y = event.pageY;
    }
    $x.text(x);
    $y.text(y);
    return [x,y];
};

// イベント設定
var handleStart = function(event) {
    event.preventDefault();// タッチによる画面スクロールを止める
    [x,y] = updateXY(event);
    mouseX = x;
    mouseY = y;
    bindMoveAndEnd();
};
var handleMove = function(event) {
    event.preventDefault(); // タッチによる画面スクロールを止める
    [x,y] = updateXY(event);
    drawCoordinates(x,y,mouseX,mouseY)
    mouseX = x;
    mouseY = y;
};
var handleEnd = function(event) {
    [x,y] = updateXY(event);
    drawCoordinates(x,y,mouseX,mouseY)
    mouseX = "";
    mouseY = "";
    unbindMoveAndEnd();
};
var bindMoveAndEnd = function() {
    $document.on(EVENTNAME_TOUCHMOVE, handleMove);
    $document.on(EVENTNAME_TOUCHEND, handleEnd);
};
var unbindMoveAndEnd = function() {
    $document.off(EVENTNAME_TOUCHMOVE, handleMove);
    $document.off(EVENTNAME_TOUCHEND, handleEnd);
};

$hitarea.on(EVENTNAME_TOUCHSTART, handleStart);

let defocolor = "#ff7f7f";
function watchColorPicker(event) {
    defocolor = event.target.value;
}
document.querySelector("#color").addEventListener("change", watchColorPicker, false);

function removePaint() {
    ctx.beginPath();
    ctx.fillStyle = "#FFFFFD";
    ctx.fillRect(0, 0, canvas.width,canvas.height);
}

おわりに

以上明日も頑張ります！！
tomowarkar ひとりAdvent Calendar Advent Calendar 2019

参考

NSPredicate中国語対応
JAva-反射