在HTML5画布中简单加载动画

Question

我正在寻找一个简单的图像加载动画.我想找到一个简短而简单的sollution,它只使用画布上的绘图和普通的Javascript.

请求帮助

Answer 1

我将使用由Ajaxload.info或Preloaders.net等在线工具生成的加载GIF ,并将其放在div标签中,您可以在canvas元素前面切换.

有关更多微调器生成器脚本,请参阅5在线加载AJAX微调器生成器工具.

希望这可以帮助!

Answer 2

 drawProgressIndicator: function(){

    var can = this.imgCanvas;
    var ctx = this.imgCtx;

    ctx.save();
    ctx.clearRect(0, 0, can.width, can.height);
    ctx.translate(can.width / 2, can.height / 2);
    ctx.scale(0.4, 0.4);
    ctx.rotate(-Math.PI / 2);
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.lineWidth = 8;
    ctx.lineCap = "round";
    var step = this.animationStep;
    ctx.fillStyle = "black";
    ctx.save();
    ctx.rotate(step * Math.PI / 30);
    ctx.strokeStyle = "#33ccff";
    ctx.fillStyle = "#33ccff";
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(68, 0);
    ctx.stroke();
    ctx.fill();
    ctx.restore();
    ctx.beginPath();
    ctx.lineWidth = 14;
    ctx.strokeStyle = 'gray';
    ctx.arc(0, 0, 80, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.restore();
    this.animationStep += 1;
},

Answer 3

这是我的加载，它使用画布有 2 个圆圈

var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
canvas.style.backgroundColor = "black";
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");

var bigCircle = {
    center: {
        x: 100,
        y: 100
    },
    radius: 50,
    speed: 4
}

var smallCirlce = {
    center: {
        x: 100,
        y: 100
    },
    radius: 30,
    speed: 2
}

var progress = 0;

function loading() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    progress += 0.01;
    if (progress > 1) {
        progress = 0;
    }

    drawCircle(bigCircle, progress);
    drawCircle(smallCirlce, progress);

    requestAnimationFrame(loading);
}
loading();

function drawCircle(circle, progress) {
    ctx.beginPath();
    var start = accelerateInterpolator(progress) * circle.speed;
    var end = decelerateInterpolator(progress) * circle.speed;
    ctx.arc(circle.center.x, circle.center.y, circle.radius, (start - 0.5) * Math.PI, (end - 0.5) * Math.PI);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "white";
    ctx.fill();
    ctx.stroke();
}

function accelerateInterpolator(x) {
    return x * x;
}

function decelerateInterpolator(x) {
    return 1 - ((1 - x) * (1 - x));
}

希望有帮助

Answer 4

这篇文章：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations帮助我绘制了自己的动画。