我正在尝试动画一个圆圈,只是水平移动它,工作正常.然而,当圆圈移动时,我必须对该圆圈执行clearRect,以便在水平方向上重新绘制它.当我做一个clearRect时,它也会使背景周围有白框,这样它就会在圆圈移动的方向上成为一条白色的水平线.
还有其他解决方法吗？
function drawcircle() {
clear();
context.beginPath();
context.arc(X, Y, R, 0, 2*Math.PI, false);
context.moveTo(X,Y);
context.lineWidth = 0.3;
context.strokeStyle = "#999999";
context.stroke();
if (X > 200)
{
clearTimeout(t); //stop
}
else
{
//move in x dir
X += dX;
t = setTimeout(drawcircle, 50);
}
}
function clear() {
context.clearRect(X-R, Y-R, 2*R, 2*R);
}
我开始使用Canvas(使用GWT),我们是否需要自己实现双缓冲？想知道浏览器是否已经为我们实现了这一点.
谢谢
我正在开发一款开始变得非常图形密集的游戏.需要绘制许多点,弧和渐变.问题是绘制所有这些图形开始变慢.当绘制在其他渐变的顶部(即,用于背景)时,RGBA径向渐变似乎需要非常长的时间来绘制.
如果有某种方法来缓冲图形,那么每帧可以节省很多计算量.根据这个问题,可以通过在html文档上创建隐藏的html5画布来完成图形缓冲.不幸的是,这不起作用,因为我需要能够为游戏缓冲未定义数量的图形.
有没有办法缓冲html5画布的图形？
我正在为iPhone创建一个HTML5应用程序,使用Sencha Touch 2在UIWebview中运行.
我创建了几种方法来帮助自己动画css.其中一个确实在我的Y轴上翻译.我在我的CSS中设置了像-webkit-backface-visibility这样的东西,以帮助平滑动画.我已经尝试过webkit perspective和webkit preserve-3d,但它们似乎无济于事.
无论如何,我已经让动画达到了非常流畅的程度.问题是,如果我同时翻译大量元素,其中一个元素将不会翻译.
假设我正在向上翻译A,B,C,D,E和F. F将直接跳到最后 - 没有翻译.这几乎就像在-webkit-transition-duration之前设置-webkit-transform一样,这不是我的代码中发生的事情.此外,A,B,C,D和E动画完美无缺.
我甚至不确定这是否是我在动画大量元素时所独有的,但这似乎就是现在的情况.如果它发生在F上,它总会发生在F - 所以它在这个意义上至少是一致的.
我甚至试图通过动态创建一个新的类样式的元素来修复它,该类样式等于变换和持续时间,将其嵌入到DOM中,然后将元素的类设置为等于样式的类.我遇到了同样的问题.
问题是,如果我在setTimeout函数中嵌入Animations.translateY的最后一行,即使是1毫秒的延迟,一切都将始终生成动画.然而,这会导致屏幕在33%的时间内闪烁,我猜这是因为setTimeouts太多了？
至于浏览器的一致性,我看到我的PC上的chrome和iPhone设备上的UIWebview都没有动画(没有setTimeout).我只在iPhone设备上看到闪烁(带有setTimeout).
Animations.translateY = function(element, measurement, duration, callback, easing)
{
Animations.setAnimationCallback(element,callback)
var css = "translate3d(0,"+measurement+",0)";
duration = parseFloat(duration);
element.style['-webkit-transition-duration'] = duration + 's';
element.style['-webkit-transform'] = css
}
动画回调代码..我觉得这是无关紧要的,因为回调从未实际触发(动画采取0不会触发回调)
Animations.setAnimationCallback = function(element, callback)
{
//set callback handler
element.addEventListener('webkitTransitionEnd',
function(){
//set animation duration back to 0
this.style['-webkit-transition-duration'] = "0s";
if(callback != null)
{
callback();
} …我有一个全屏画布,上面画有3个图像.当我调整窗口大小时,这些图像会改变位置; 然而,它似乎非常小问题,在Firefox中更是如此.
我一直在读,双缓冲应该可以解决这个问题,但是我想知道当下一个位置未知时我将如何加倍缓冲.也就是说,我无法确定将来应该缓存什么,那么这怎么可能呢？
这是一个看似可行的来源,但我并不完全理解Fedor试图解释的概念.
到目前为止,我有,
$canvas = $('#myclouds')[0];
$canvas_buffer = $('canvas')[0].insertAfter($canvas).css('visibility', 'hidden');
context = $canvas.getContext('2d');
context_buffer = $canvas_buffer.getContext('2d');
clouds_arr = [$canvas, $canvas_buffer];
$(window).resize(function () {
drawCanvas();
};
function initCanvas() {
// Sources for cloud images
var cloud1 = '/js/application/home/images/cloud1.png',
cloud2 = '/js/application/home/images/cloud2.png',
cloud3 = '/js/application/home/images/cloud3.png';
// add clouds to be drawn
// parameters are as follows:
// image source, x, y, ratio, adjustment)
addCloud(cloud1, null, 125, .03);
addCloud(cloud2, null, 75, .15);
addCloud(cloud3, null, 50, .55);
addCloud(cloud1, null, 125, .97, …