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]
            })
        }
    }

  • 相关阅读:
    解决hung_task_timeout_secs问题【方法待校验】
    C++面向对象程序设计 学习心得
    试水训练1
    并查集
    ACM儿童节热身训练
    图论部分学习小结
    ACM儿童节热身训练
    堆及其应用学习小结
    ACM本周小结
    POJ-3273-Monthly Expense
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5688841.html
Copyright © 2011-2022 走看看