diff --git a/index.html b/index.html index 1833f2c..91ef6dd 100644 --- a/index.html +++ b/index.html @@ -4,5 +4,15 @@ canvas-photo-gallery + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..ff5b6bb --- /dev/null +++ b/main.js @@ -0,0 +1,31 @@ +console.log("load main.js success!"); +const canvas = document.getElementById("c"); +const ctx = canvas.getContext("2d"); + +function render() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + ctx.fillStyle = "#eee"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.beginPath(); + ctx.moveTo(20, 20); + ctx.lineTo(200, 50); + ctx.strokeStyle = 'blue'; + ctx.lineWidth = 4; + ctx.stroke(); + + ctx.font = "20px Arial"; + ctx.fillStyle = "black"; + ctx.fillText("Canvas", 20, 100); + + requestAnimationFrame(render); +} + +render(); + +canvas.addEventListener("click", (e) => { + const rect = canvas.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; +});