ホーム > カテゴリ > HTML5・JavaScript >

canvasでドット絵用のキャンバスを作成する[1マス=1ドット]

HTML5のcanvasでドット絵用の四角いマスを配置してマウスダウンでマスを塗りつぶす事ができるキャンバスのサンプルです。

このサンプルプログラムでは1マスは1ドットとなります。

ドット絵のキャンバス体験

「10x10」のキャンバスの上でマウスをダウンすることによってマスを塗りつぶす事ができます。マウスをダウンしたまま移動する連続して塗りつぶせます。

現在座標はマウスがある位置の座標。マウスダウンはマウスダウンした座標。セル番号はキャンバスのセル番号です。Rは「Row = 行番号」、Cは「Col = 列番号」となります。

このドット絵のキャンバスはブラウザで動作する「アイコンエディタ」のプロトタイプとして作成しました。

サンプルプログラム

前章のキャンバス体験と同じコードとなります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var canvas; // キャンバス
var ctx;    // コンテキスト

var canvas_magnification = 25;    // 表示倍率  
var canvas_width  = 10;           // キャンバス横幅   
var canvas_height = 10;           // キャンバス縦幅 
var canvas_mousedown_flg = false; // マウスダウンフラグ

///// 内部関数

function init_canvas(){
  canvas_mousedown_flg = false;
  
  ctx.fillStyle = "rgb(255, 255, 255)";  
  ctx.fillRect(0,0,canvas.width,canvas.height);
                 
  drawRule();  
}
   
// 座標からブロック名を取得する   
function Point2BlockName(x,y){  
  var col = 'C' + (Math.floor(x / canvas_magnification)+1);
  var row = 'R' + (Math.floor(y / canvas_magnification)+1);
  
  document.getElementById('msg3').innerHTML = 'セル番号　' +row + ' x ' + col;
}  

// キャンバスに罫線を描画する
function drawRule(){

  // 線の色
  ctx.strokeStyle = "#1e90ff";
 
  // 線の太さ
  ctx.lineWidth = 2;
  
  // 破線
  if (ctx.setLineDash){
    ctx.setLineDash([1, 2]);
  }
  
  ctx.beginPath();
  
  // 縦線
  for (var i = 0; i < canvas_width+1; i++) {
    ctx.moveTo((i*canvas_magnification),0);
    ctx.lineTo((i*canvas_magnification),canvas.height);
  }

  // 横線
  for (var i = 0; i < canvas_height+1; i++) {
    ctx.moveTo(0,(i*canvas_magnification));
    ctx.lineTo(canvas.height,(i*canvas_magnification));
  }

  ctx.stroke();  
}

///// イベント
    
window.onload = function (){
  // キャンバス
  canvas = document.getElementById("MyCanvas");
     
  canvas.width  = canvas_width * canvas_magnification;
  canvas.height = canvas_height * canvas_magnification;    
  
  ctx = canvas.getContext("2d");
  
  canvas.addEventListener('mousedown', OnMousedown);
  canvas.addEventListener('mousemove', OnMousemove);
  canvas.addEventListener('mouseup', OnMouseup);
  window.addEventListener('mouseup', OnMouseup);
  
  init_canvas();              
}

function OnMousedown(e) {
  var rect = e.target.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top; 
        
  // 塗りつぶし
  var col = Math.floor(mouseX / canvas_magnification);
  var row = Math.floor(mouseY / canvas_magnification);
  
  ctx.fillStyle = "rgb(200, 0, 0)";  
  ctx.fillRect(col * canvas_magnification, row * canvas_magnification,
               canvas_magnification, canvas_magnification);
  
  // 罫線の描画
  drawRule();
  
  document.getElementById('msg2').innerHTML = 'マウスダウン　X:' +mouseX + ' Y' +mouseY;
  
  canvas_mousedown_flg = true;
}

function OnMousemove(e) {
  var rect = e.target.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top; 
        
  if (canvas_mousedown_flg){
      // 塗りつぶし
      var col = Math.floor(mouseX / canvas_magnification);
      var row = Math.floor(mouseY / canvas_magnification);
      
      ctx.fillStyle = "rgb(200, 0, 0)";  
      ctx.fillRect(col * canvas_magnification, row * canvas_magnification, 
                   canvas_magnification, canvas_magnification);
      
      drawRule();
  }  
 
  document.getElementById('msg1').innerHTML = '現在座標　X:' +mouseX + ' Y' +mouseY;
  Point2BlockName(mouseX,mouseY);
}

function OnMouseup(e) {
  canvas_mousedown_flg = false; 
}            
</script> 
</head>
<body>
<button onclick="init_canvas();">クリア</button>
<p></p>
<canvas id="MyCanvas" style="paddling:0;"></canvas>
<div id="msg1"></div>
<div id="msg2"></div>
<div id="msg3"></div> 
</body>
</html>

ドット絵用のマスはdrawRule()関数でmoveTo/lineToメソッドを使用して罫線を描画します。

重要なコードはマウス系イベントで使用しているgetBoundingClientRectプロパティです。このプロパティは矩形のサイズ情報を返します。そこから、clientXとclientYを使用して現在のマウスカーソルの座標を取得しています。

※getBoundingClientRectプロパティはW3Cの仕様ではありません。ただし、IE11/Edge/Chrome/FireFoxでの動作確認はしております。IE9/IE10は未確認ですがあると思います。

関連リンク

塗りつぶしのアルゴリズム[ペイント系]

参考リンク

Web IconEditor





関連記事


前の記事：2つの画像を合成する[アルファブレンド]
次の記事：画像の指定位置の色(RGBA)を取得する

公開日：2016年02月22日
記事NO：01788


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律