32 lines
685 B
JavaScript
32 lines
685 B
JavaScript
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;
|
|
});
|