はじめに
とりあえずプログラムを載せときます。HTMLとCSSが一緒になったやつ。結構な時間をかけて作ったので
いいねを押してくれると嬉しいです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
canvas {
border: 1px solid black;
}
#tools {
display: flex;
margin-top: 10px;
}
button {
margin: 0 5px;
padding: 5px 10px;
border: none;
cursor: pointer;
}
</style>
</head>
<title>お絵かきアプリ</title>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<div id="tools">
<input type="color" id="colorPicker">
<input type="range" id="penSize" min="1" max="20" value="5">
<button id="eraser">消しゴム</button>
<input type="range" id="eraserSize" min="5" max="50" value="20">
<button id="clear">全消去</button>
</div>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let painting = false;
let color = "black";
let erasing = false;
let penSize = 5;
canvas.addEventListener("mousedown", startPainting);
canvas.addEventListener("mouseup", stopPainting);
canvas.addEventListener("mousemove", draw);
document.getElementById("colorPicker").addEventListener("change", e => {
color = e.target.value;
erasing = false;
});
document.getElementById("eraser").addEventListener("click", () => {
color = "white";
erasing = true;
penSize = document.getElementById("eraserSize").value;
});
document.getElementById("penSize").addEventListener("input", e => {
penSize = e.target.value;
erasing = false;
});
document.getElementById("eraserSize").addEventListener("input", e => {
penSize = e.target.value;
if (erasing) {
erasing = true;
}
});
document.getElementById("clear").addEventListener("click", clearCanvas);
function startPainting(event) {
painting = true;
draw(event);
}
function stopPainting() {
painting = false;
context.beginPath();
}
function draw(event) {
if (!painting) return;
context.lineWidth = penSize;
context.lineCap = "round";
context.strokeStyle = color;
if (erasing) {
context.globalCompositeOperation = "destination-out";
} else {
context.globalCompositeOperation = "source-over";
}
context.lineTo(event.clientX - canvas.getBoundingClientRect().left, event.clientY - canvas.getBoundingClientRect().top);
context.stroke();
context.beginPath();
context.moveTo(event.clientX - canvas.getBoundingClientRect().left, event.clientY - canvas.getBoundingClientRect().top);
}
function clearCanvas() {
if (confirm("本当に全ての描画を消去しますか？")) {
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
</script>
</body>
</html>
jsのプログラム
const clickButton = document.getElementById("clickButton");
const countElement = document.getElementById("count");
let count = 0;
clickButton.addEventListener("click", () => {
count++;
countElement.textContent = count;
if (count === 10) {
alert("Congratulations! You won!");
count = 0;
countElement.textContent = count;
}
});
このプログラムで質問がある方はコメント欄にお願いします。