相关疑难解决方法(0)

Clear Canvas Rect(但保留背景)

我正在尝试动画一个圆圈,只是水平移动它,工作正常.然而,当圆圈移动时,我必须对该圆圈执行clearRect,以便在水平方向上重新绘制它.当我做一个clearRect时,它也会使背景周围有白框,这样它就会在圆圈移动的方向上成为一条白色的水平线.

  1. 有没有办法在没有clearRect的情况下清除圆圈?
  2. 如果我必须在clearRect之后继续重新绘制背景,那么当theres说10个圆圈在那个区域移动时,画布将会闪烁.

还有其他解决方法吗?

    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);
    }
Run Code Online (Sandbox Code Playgroud)

html drawing canvas

13
推荐指数
1
解决办法
2万
查看次数

保存/恢复HTML5 Canvas的背景区域

我使用HTML5 canvas如下:

  1. 显示填充画布区域的图像.
  2. 在图像上显示黑色文本标签.
  3. 单击文本标签时,通过绘制填充的红色矩形+白色文本突出显示它.

我有那部分一切正常.现在我想要做的是删除红色矩形并恢复原来在它后面的图像背景.我是画布的新手并且阅读了相当数量,但是我看不出怎么做.那说我相信它一定很简单.

html5 canvas

4
推荐指数
1
解决办法
4502
查看次数

标签 统计

canvas ×2

drawing ×1

html ×1

html5 ×1