Canvas 图片绕边旋转的小动画

原文链接： https://www.mk2048.com/blog/blog.php?id=h02jbkkabhbb&title=Canvas+%E5%9B%BE%E7%89%87%E7%BB%95%E8%BE%B9%E6%97%8B%E8%BD%AC%E7%9A%84%E5%B0%8F%E5%8A%A8%E7%94%BB

/**
 * 图片绕边旋转的小动画
 */
function initDemo10() {
    var canvas = document.getElementById("demo10");
    if (!canvas) {
        return;
    }
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src ="images/timg3.jpg";
    img.onload = function () {
        var i = 0;
        var i_symbol = 1;
        var j = 0;
        var j_symbol = 1;
        setInterval(function () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            if (i <= 0 && j <= 0){
                i_symbol = 1;
                j_symbol = 0;
            }else if (i >= (canvas.width - img.width) && j <= 0){
                i_symbol = 0;
                j_symbol = 1;
            }else if (i >= (canvas.width - img.width) && j >= (canvas.height - img.height)){
                i_symbol = -1;
                j_symbol = 0;
            }else if (i <= 0 && j >= (canvas.height - img.height)){
                i_symbol = 0;
                j_symbol = -1;
            }
            i  = i_symbol;
            j  = j_symbol;
            context.drawImage(img, i, j);
        }, 10);
    }
}

更多专业前端知识，请上 【猿2048】www.mk2048.com