saingchildren/canvas-photo-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
saingchildren 2025-11-14 09:06:49 +08:00
parent d4b65b4ecd
commit cddc95ecc4
2 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -4,5 +4,15 @@
<title>canvas-photo-gallery</title>
</head>
<body>
<canvas height="400" width="600" id="c" style="border: 1px solid #333"</canvas>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
var vConsole = new window.VConsole();
</script>
<script>
const s = document.createElement("script");
s.src = "./main.js?v=" + Date.now();
document.body.appendChild(s);
</script>
</body>
</html>

31
main.js Normal file
View File

@ -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;
});