首页点击按钮切换canvas

点击按钮切换canvas

时间: 2024-09-24 08:15:02 浏览: 49

在HTML5 Canvas上实现点击按钮切换内容通常涉及JavaScript编程。你可以创建一个HTML页面，包含一个canvas元素和几个按钮，然后利用JavaScript事件监听机制来控制canvas的内容。以下是简要步骤： 1. **HTML结构**: ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Canvas切换示例</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <button onclick="drawRectangle()">画矩形</button> <button onclick="drawCircle()">画圆形</button> <script src="script.js"></script> </body> </html> ``` 2. **JavaScript脚本** (script.js): ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); function drawRectangle() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的内容 ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 400, 400); } function drawCircle() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 同样清除内容 ctx.beginPath(); ctx.arc(250, 250, 200, 0, Math.PI * 2); ctx.fillStyle = 'blue'; ctx.fill(); } // 设置初始绘制函数 drawRectangle(); // 初始加载时默认显示矩形 ``` 在这个例子中，当你点击“画矩形”按钮时，`drawRectangle` 函数会被调用，清空并绘制红色矩形；点击“画圆形”按钮则会调用 `drawCircle` 函数，清除并绘制蓝色圆形。

阅读全文