practice

　　　　

<html>
<meta charset="utf-8">

<canvas id="目印"width="600"height="600"style="border:solid 1px #abcdef;"></canvas>
<br>
<button id="消去">切り替え</button>

<script>
描く=document.getElementById("目印");
用紙=描く.getContext("2d");
消します=document.getElementById("消去");
表示={handleEvent:距離};
書き込み=1;
くりっく=0;
描く.addEventListener("mousedown",始まり);
描く.addEventListener("mouseout",終わり);
描く.addEventListener("mouseup",終わり);
function お絵かき(横,縦)
{作品=1;
if(くりっく===1)
{くりっく=2;
用紙.beginPath();
用紙.moveTo(横,縦);}
else
{用紙.lineTo(横,縦);}
用紙.stroke();}
用紙.lineCap="round";
用紙.lineJoin="round";
用紙.lineWidth=12;
用紙.strokeStyle="blue";
function 始まり()
{くりっく=1;
描く.addEventListener("mousemove",表示);}
function 終わり()
{くりっく=0;
用紙.closePath();
描く.removeEventListener("mousemove",表示);}
function 距離(event)
{鉛筆=event.currentTarget.getBoundingClientRect();
横=event.clientX-鉛筆.left;
縦=event.clientY-鉛筆.top;
お絵かき(横,縦);}
消します.addEventListener("click",切り替えます);
function 切り替えます()
{if(書き込み===1)
{書き込み=2;
用紙.globalCompositeOperation="destination-out";
消します.textContent="切り替え"}
else
{用紙.globalCompositeOperation="source-over";
書き込み=1;
用紙.strokeStyle=lineColor;
消します.textContent="切り替え";}}
</script>

</html>