Question

我做了一些关于画布的网络搜索以及如何创建循环进度条，我得到了这个。我对我在网上找到的代码片段进行了一些更改，但我无法再次重新加载循环路径。通过重新加载我的意思是，当圆圈已满（一个完美的圆圈）时，我想再次绘制它。换句话说，我想在完成完全旋转后重复绘制圆圈的过程。当我的变量触发器大于100时，我试图清除整个画布，但没有成功。有什么想法吗？

这是代码

function draw() {
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit(){
        
        diff = ((time / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(trigger >= 100){
            ctx.clearRect(0, 0, cw, ch);
        }
        time++;
    }
    var trigger = setInterval(justdoit, 1000);
}

<button onclick="draw()"> draw </button>
<canvas id="prog"></canvas>

在具有属性onclick =“draw（）”;

的按钮元素上调用函数draw

Answer 1

最后一个'if'块是错误的。请改用：

import numpy as np


def improved(prob_matrix, items):
    # transpose here for better data locality later
    cdf = np.cumsum(prob_matrix.T, axis=1)
    # random numbers are expensive, so we'll get all of them at once
    ridx = np.random.random(size=n)
    # the one loop we can't avoid, made as simple as possible
    idx = np.zeros(n, dtype=int)
    for i, r in enumerate(ridx):
        idx[i] = np.searchsorted(cdf[i], r)
    # fancy indexing all at once is faster than indexing in a loop
    return items[idx]


def original(prob_matrix, items):
    choices = np.zeros((n,))
    # This is slow, because of the loop in Python
    for i in range(n):
        choices[i] = np.random.choice(items, p=prob_matrix[:,i])
    return choices


def vectorized(prob_matrix, items):
    s = prob_matrix.cumsum(axis=0)
    r = np.random.rand(prob_matrix.shape[1])
    k = (s < r).sum(axis=0)
    return items[k]


m = 10
n = 10000 # Or some very large number

items = np.arange(m)
prob_weights = np.random.rand(m, n)
prob_matrix = prob_weights / prob_weights.sum(axis=0, keepdims=True)

这只会让事情一遍又一遍地重演。希望这就是你想要的。

完整的代码在这里（我通过将底部等待时间从'1000'改为从底部的第二行中的'10来加速了这一步）：

if(time >= 100){
    ctx.clearRect(0, 0, cw, ch);
    time = 0;
}

function draw() {
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit(){
        
        diff = ((time / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(time >= 100){
            ctx.clearRect(0, 0, cw, ch);
            time = 0;
        }
        time++;
    }
    var trigger = setInterval(justdoit, 10);
}

Answer 2

我不确定这是否是您所追求的，我已将计时器分离出圆圈的位置，这样您就可以每100秒将位置重置为0而不重置时间。

我改变的重要事项：

添加了一个名为pos的新变量。

var pos = 0;

将diff计算更改为使用pos。

diff = ((pos / 100) * Math.PI*2*10);

更改了if语句，每隔100秒将pos设置回0并清除圆圈。

if(time % 100 == 0){
    pos = 0;
    ctx.clearRect(0, 0, cw, ch);
}

使用pos增加time。

pos++;

此外，我在示例中减少了计时器，因此我们不必等待很长时间才能看到。 - 更改回1000，间隔1秒setInterval(justdoit, 100);

function draw() {
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var pos = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit(){
        
        diff = ((pos / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(time % 100 == 0){
            pos = 0;
            ctx.clearRect(0, 0, cw, ch);
        }
        time++;
        pos++;
    }
    var trigger = setInterval(justdoit, 100);
}

<button onclick="draw()"> draw </button>
<canvas id="prog"></canvas>

如何重新加载循环进度条

2 个答案: