zoukankan      html  css  js  c++  java
  • [GIF] GIF Loop Coder

    Introducing the program, GIF Loop Coder, which allows you to make looping animated gifs (and other types of animations) using JavaScript and HTML5 Canvas. We'll cover the basic UI and syntax of how to add objects to the animation list, animate them and save the result as an animated gif.

    function onGLC(glc) {
        glc.loop();
    //     glc.size(400, 400);
    //     glc.setDuration(5);
    //     glc.setFPS(20);
    //     glc.setMode('single');
    //     glc.setEasing(false);
        var list = glc.renderList,
            width = glc.w,
            height = glc.h,
            color = glc.color;
    
        // your code goes here:
    
        list.addCircle({
            x:width/2,
            y:height/2,
            radius:150,
            fillStyle:"yellow",
            stroke: true,
            strokeStyle:"red",
            lineWidth: 20
        });
        
    }

    Make it move:

    To do that you can pass array to the props:

    function onGLC(glc) {
        glc.loop();
    //     glc.size(400, 400);
    //     glc.setDuration(5);
    //     glc.setFPS(20);
    //     glc.setMode('single');
    //     glc.setEasing(false);
        var list = glc.renderList,
            width = glc.w,
            height = glc.h,
            color = glc.color;
    
        // your code goes here:
    
        list.addCircle({
            x:width/2,
            y:height/2,
            radius:[100, 150],
            fillStyle: ["green", "yellow"],
            stroke: true,
            strokeStyle: ["yellow", "red"],
            lineWidth: [12, 20]
        });
        
    }

    Create Mutli stars:

    function onGLC(glc) {
        glc.loop();
    //     glc.size(400, 400);
    //     glc.setDuration(5);
    //     glc.setFPS(20);
    //     glc.setMode('single');
    //     glc.setEasing(false);
        var list = glc.renderList,
            width = glc.w,
            height = glc.h,
            color = glc.color;
    
        // your code goes here:
    
    /*    list.addCircle({
            x:width/2,
            y:height/2,
            radius:[100, 150],
            fillStyle: ["green", "yellow"],
            stroke: true,
            strokeStyle: ["yellow", "red"],
            lineWidth: [12, 20]
        });*/
        
        for(var i = 0; i < 100; i++ ){
             list.addStar({
                x: Math.random() * width,
                y: Math.random() * height,
                outerRadius: 30 + Math.random() * 30,
                innerRadius: 10 + Math.random() * 20,
                fillStyle: color.randomRGB(),
                rotation: [0,120]
            })
        }
    }

  • 相关阅读:
    学员操作——隔行变色
    jQuery基础及选择器(1)
    学员操作——组合继承
    JavaScript面向对象
    学员操作——创建继承person的student子类
    学员操作——flower函数
    JavaScript操作DOM(2)
    JavaScript操作DOM(1)
    学员操作——制作秒表定时器
    学员操作——制作5s关闭广告
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5688841.html
Copyright © 2011-2022 走看看