HTML5 Canvas drawImage 仅在第二次刷新后绘制
问题描述:在使用 HTML5
Canvas
进行绘图时,drawImage
函数会在浏览器刷新后仅绘制一次。这意味着在调用该函数后,如果浏览器缓存了画布内容,需要手动刷新才能看到最新的绘制效果。
context.draw()
刷新画布:在需要刷新画布时,调用 context.draw()
函数。这将在当前绘画操作完成后立即刷新浏览器。示例代码:
// 假设 canvas 元素 id 为 "myCanvas"
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 绘制背景颜色
ctx.fillStyle = "rgba(200, 100, 100, 1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制图像
const image = new Image();
image.src = "path/to/your/image.png";
image.onload = function() {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
};
// 刷新画布
ctx.draw();
window.location.reload()
手动刷新页面:在需要刷新页面时,使用 window.location.reload()
函数。这将在当前页面被重新加载时立即刷新。示例代码:
// 假设 canvas 元素 id 为 "myCanvas"
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 绘制背景颜色
ctx.fillStyle = "rgba(200, 100, 100, 1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制图像
const image = new Image();
image.src = "path/to/your/image.png";
image.onload = function() {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// 刷新页面以查看最新的绘制效果
window.location.reload();
};
通过这两种方法,可以确保 drawImage
函数在每次调用时都会绘制最新的内容,而无需手动刷新浏览器。
领取专属 10元无门槛券
手把手带您无忧上云