Canvas粒子背景效果

时间:2021-1-8 作者:admin
  • 封装一个工厂生成不同大小,不同位置,运动速度不同的点,这些根据屏幕缩放比生成,保证各个屏幕大小下显示协调

    function creatPoint() {
        var xsKew = (Math.random() - 0.5) * zoom;//x方向速度
        var ysKew = (Math.random() - 0.5) * zoom;//y方向速度
        var r = ~~(Math.random() * 5 * zoom);
        var x = ~~(Math.random() * (width - r)) + 2 * r;
        var y = ~~(Math.random() * (height - r)) + 2 * r;
        var point = {
            x: x,
            y: y,
            xsKew: xsKew,
            ysKew: ysKew,
            r: r
        }
        return point;
    }
    
  • 在初始化Canvas时循环生成一些点,塞到数组中,画点时循环数组画点

    “`
    //初始化先放200个点
    for (var i = 0; i

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。