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

  • 相关阅读:
    failed call to cuInit: CUDA_ERROR_NO_DEVICE: no CUDA-capable device is detected 排坑指南
    使用labelme制作自己的数据集
    linux安装anaconda3 conda: command not found
    windows端运行.sh脚本
    安装easydict
    tensorflow安装排坑笔记
    Dev怎么调试,怎么调试不了???
    NameError: name 'QApplication' is not defined 的解决办法
    绝对路径和相对路径
    关于Pycharm总是Indexing很久的问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5688841.html
Copyright © 2011-2022 走看看