gpt4 book ai didi

javascript - 调用 clearRect 后,HTML5 Canvas 不会在 Chrome 中重绘

转载 作者:可可西里 更新时间:2023-11-01 13:13:34 29 4
gpt4 key购买 nike

我已经盯着这个太久了,需要一些帮助。我有以下简化的 fiddle 示例,它在 IE 中有效,但在 Chrome 中无效(没有错误,只是在 Chrome 中清除 Canvas 后没有图像被重绘):

http://jsfiddle.net/JrLh7/3/

var myApp = {};
// redraw function that will be called during init and then will loop.
myApp.redrawFunction = function() {
window.requestAnimationFrame(myApp.redrawFunction);
// clear canvas (not needed in this simplified example, but I need it in my real app)
myApp.drawingContext.clearRect(0, 0, myApp.canvas.width, myApp.canvas.height);
// draw an image.
var myImage = new Image();
myImage.onload = function() {
myApp.drawingContext.drawImage(myImage, 0, 0);
};
myImage.src= "http://www.w3.org/html/logo/img/mark-word-icon.png";
};
// initialize
$(function () {
// setup the animation frame objects.
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
window.cancelAnimationFrame = window.CancelAnimationFrame
|| window.CancelRequestAnimationFrame
|| window.mozCancelAnimationFrame
|| window.mozCancelRequestAnimationFrame
|| window.msCancelAnimationFrame
|| window.msCancelRequestAnimationFrame
|| window.webkitCancelAnimationFrame
|| window.webkitCancelRequestAnimationFrame;
// get canvas references.
myApp.canvas = $("canvas")[0];
myApp.drawingContext = myApp.canvas.getContext("2d");
$(myApp.canvas).css("background-color", "#999999");
// update canvas size to fill screen.
myApp.canvas.width = $(window).width();
myApp.canvas.height = $(window).height();
$(window).resize(function (){
myApp.canvas.width = $(window).width();
myApp.canvas.height = $(window).height();
});
// start redraw loop
myApp.redrawFunction();
});

如果您在 IE 10 中打开此 fiddle ,它会起作用(您会看到一个 Logo )。如果您在 Chrome 中打开它,您会看到一个空白 Canvas ,表明我的 drawImage 调用在清除 Canvas 后不起作用。有什么想法我想念的吗?

最佳答案

问题是您正在清除 Canvas ,然后等待图像加载,当图像加载时,动画再次运行,清除 Canvas 并等待新图像加载。因此,您总是在调用 clearRect 后立即看到 Canvas 状态,因为当您调用 drawImage 时,动画例程会在您有机会看到结果之前再次启动drawImage(),您将看到 clearRect() 的结果。

解决方案是在准备好绘制图像之前不要清除 Canvas 。 http://jsfiddle.net/JrLh7/6/

var myApp = {};
// redraw function that will be called during init and then will loop.
myApp.redrawFunction = function() {
// Don't clear the canvas here, it will be empty until the onload handler is called
var myImage = new Image();
myImage.onload = function() {
// Clear canvas and immediately paint the image
myApp.drawingContext.clearRect(0, 0, myApp.canvas.width, myApp.canvas.height);
myApp.drawingContext.drawImage(myImage, 0, 0);
// Then you should ask for another frame after you've finished painting the canvas
window.requestAnimationFrame(myApp.redrawFunction);
};
myImage.src= "http://www.w3.org/html/logo/img/mark-word-icon.png";
};

注意

拥有一个异步的动画例程没有多大意义。如果是这样,至少,在 Canvas 绘制完成之前,您不应请求新的动画帧。

关于javascript - 调用 clearRect 后,HTML5 Canvas 不会在 Chrome 中重绘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15350969/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com