ディスプレイに描画できるようにする
ディスプレイに文字を記述したり消したりできるようにします。
まず、body要素内にcanvas要素とbutton要素を記述します。
文字等はcanvas内に描画できるようにして、button要素をクリックすると描画したものを消去できるようにします。
canvas要素を取得できるようにcanvas要素内にid属性を設定します。
button要素をクリックしたら描画したものを消去するイベントを発火させるようにonclick属性を設定します。
<body onload="init()">
<canvas id="canvas" width="700" height="700"></canvas><br>
<button onclick="eraser()">消去</button>
</body>
グローバル変数に「ctx」と「points」を設定します。pointsは描画した軌跡のデータを全て記録できるように配列にします。
上記のbody要素にonload属性を設定しているので、ブラウザがページが読み込んだ後に「init( )」関数が発火します。
init( )関数内はまず、canvasに描画できるように変数canvasにbody内のcanvas要素を取得させ、変数ctxにコンテキストを取得させます。
次にキャンバスがマウス等で「押されたとき①」、「押された状態でマウスが動いたとき②」、「押していた状態から離されたとき③」でそれぞれ関数を設定します。
①「onmousedown」プロパティを変数canvasに設定して、マウスが押されたときにmymousedown関数が発火します。mymousedown関数は押した時点のキャンバス内の座標を配列pointsに挿入します。
引数に「e」を指定することで押したときのいろいろな情報を取得できます。「e.offsetX」で押したときのキャンバス上のx座礁、「e.offsetY」で押したときのy座標を取得できるので、それぞれxとyの値とします。
②「onmousemove」プロパティはマウスが動いたときにmymousemove関数が発火します。「if(points.length > 0)」とすることで、points内にデータが1つ以上無いとx,y座標データをpoints内に追加できないようになっています。つまりマウスが押されていないときはデータが追加できません。
pushメソッドは引数内の要素を指定した配列の末尾に追加するメソッドです。マウスが押された状態で動くたびにpointsの末尾に座標データが追加されます。
paint()関数でマウスが動いた軌跡を描画します。
③「onmouseup」プロパティはマウスが押された状態から離されたときにmymouseup関数が発火します。pointsを空にすることで描画を中断します。
eraser( )関数は描画したものを消去することができます。「clearRect」メソッドは指定した要素を指定した範囲分消去することができるメソッドです。
paint( )関数はマウスを押下した状態で動かした軌跡を描画する関数です。「if(points.length <= 1) { return; }」で配列にデータが無いときは描画できないようにしています。
「ctx.beginPath( );」は描画を開始するときに用いるメソッドです。「moveTo( )」メソッドは描画するときの開始点となる座標を設定するメソッドです。moveTo(x, y)それぞれxがx座標、yがy座標。
「lineTo( )」メソッドは直前に指定した座標から直線を引く新たな座標を設定するメソッドです。lineTo(x, y)それぞれxがx座標、yがy座標です。このlineTo( )メソッドをfor文で繰り返すことでpoints内の軌跡データを繋ぐことができます。
「strokeStyle」プロパティは描画するときの色を指定できます。
「stroke( )」メソッドはctx.beginPath( );以降の座標を辿って、指定した色で実際に描画してくれます。
<script>
let ctx, points = [];
function init() {
let canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.onmousedown = mymousedown;
canvas.onmousemove = mymousemove;
canvas.onmouseup = mymouseup;
}
function mymousedown(e) {
points = [{
x: e.offsetX,
y: e.offsetY
}]
}
function mymousemove(e) {
if(points.length > 0) {
points.push({
x: e.offsetX,
y: e.offsetY
})
}
paint();
}
function mymouseup(e) {
points = [];
}
function eraser() {
ctx.clearRect(0, 0, 700, 700);
}
function paint() {
if(points.length <= 1) {
return;
}
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for(let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.strokeStyle = "#333333";
ctx.stroke();
}
</script>
以下のコードをコピーしてファイルに貼り付けていただければ、試すことができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>draw</title>
<style>
canvas {
border: 1px solid black;
}
button {
width: 100px;
height: 30px;
}
</style>
<script>
let ctx, points = [];
function init() {
let canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.onmousedown = mymousedown;
canvas.onmousemove = mymousemove;
canvas.onmouseup = mymouseup;
}
function mymousedown(e) {
points = [{
x: e.offsetX,
y: e.offsetY
}]
}
function mymousemove(e) {
if(points.length > 0) {
points.push({
x: e.offsetX,
y: e.offsetY
})
}
paint();
}
function mymouseup(e) {
points = [];
}
function eraser() {
ctx.clearRect(0, 0, 700, 700);
}
function paint() {
if(points.length <= 1) {
return;
}
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for(let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.strokeStyle = "#333333";
ctx.stroke();
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="700" height="700"></canvas><br>
<button onclick="eraser()">消去</button>
</body>
</html>