canvas绚丽花朵动画

PROMULGATOR

豆豆天尊

四川省成都市

← table表格固定表头

→ 纯CSS海浪

相关代码

canvas绚丽花朵动画

css加载+canvas动画

canvas绘制动画

带刺的花动画效果

canvas撕衣服

SVG路径动画

Html

Css

Js

body {
	width:100%;
	overflow:hidden;
	margin:0;
	background:hsla(0,0%,0%,1);
}

var c = document.getElementById("canvas"),
    $ = c.getContext('2d'),
    w = c.width = window.innerWidth,
    h = c.height = window.innerHeight;
$.fillRect(0, 0, w, h);
var u = 10,
    _u, r = 0,
    l = 20;
var num = 100;

function anim() {
    $.globalCompositeOperation = 'source-over';
    $.fillstyle = "hsla(0,0%,0%,0.75)";
    $.fillRect(0, 0, w, h);
    $.globalCompositeOperation = 'lighter';
    var g = $.createLinearGradient(0, 0, w, h);
    $.lineWidth = 0.18;
    $.beginPath();
    for (j = 0; j < 1; j++) {
        for (var i = 0; i < num; i++) {
            _u = (u / 4) + 1;
            $.translate(w / 2, h / 2);
            $.rotate(32.1 * Math.PI / 180);
            $.translate(-w / 2, -h / 2);
            $.strokeRect(w / 2, h / 2, i, i);
        }
    }
    g.addColorStop(0.0, "hsla(" + u + ",85%,50%,1)");
    g.addColorStop(0.5, "hsla(" + _u + ",85%,40%,1)");
    g.addColorStop(1, "hsla(0,0%,5%,1)");
    $.strokeStyle = g;
    $.stroke();
    u += 4;
    r += 1;
    requestAnimationFrame(anim);
}
anim();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas绚丽花朵动画



代码描述：canvas写的一个会变色的花朵动画

这是一款纯canvas动画

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绚丽花朵动画-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号