使用canvas画闪闪星光

2019-11-16 张宇童 学习日志

突发奇想写了一写

效果图  点击查看效果

2019-11-16 14.15.05.gif

第一步创建html结构


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div>
    <canvas id="canvas" height="600" width="800"></canvas>
    <script type="text/javascript" src="./js/main.js"></script>
    <script type="text/javascript" src="./js/star.js"></script>
</div>
</body>
</html>
第二部写js文件


main.js


let can;
let ctx;
let w;
let h;
let img = new Image();
let jpgimage = new Image();
let num = 5;
let starArr = []
document.body.onload = () => {
    can = document.getElementById('canvas')
    ctx = can.getContext('2d');
    w = can.width;
    h = can.height;
    jpgimage.src = 'src/IMG_2727 0.jpg'
    img.src = 'src/star.png'
    for (let i = 0 ; i < num; i++ ) {
        starArr.push(new StarObj)
        starArr[i].draw()
    }
    gameloop()
}

function drawBackground() {
    ctx.fillStyle = '#303550';
    ctx.fillRect(0,0, w, h)

    console.log('1')
}

function gameloop() {
    window.requestAnimFrame(gameloop)
    drawBackground();
    drawJpg()
    for (let i of starArr) {
        i.draw()
    }
}

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);//定义每秒执行60次动画
        };
})();

const drawJpg = () => {
    // console.log(this)
    ctx.drawImage(jpgimage, 100, 100, 600, 350)
}
start.js



class StarObj{
    constructor() {
        this.x = Math.floor(Math.random() * can.width);
        this.y = Math.floor(Math.random() * can.height);
        this.lastTime = Date.now();
        this.timer = 0;
        this.n = Math.floor(Math.random() * 7);
    }
    update() {
        let space = Date.now() - this.lastTime;
        this.lastTime = Date.now();
        this.timer = space + this.timer;
        if (this.timer > 50) {
            this.n++;
            this.timer = 0;
            if (this.n > 7) {
                this.n = 0;
            }
        }
    }
    draw() {
        this.update()
        ctx.drawImage(img, this.n * 7, 0, 7, 7, this.x, this.y, 7, 7)
    }
}


标签: javascript ES6

评论(0) 浏览(426)

兼容封装requestAnimFrame

2019-11-16 张宇童 学习日志

没有啥好解释的直接复制用就可以了

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);//定义每秒执行60次动画
        };
})();

标签: javascript ES6

评论(0) 浏览(434)

关于inline-block的间隙问题

2019-11-14 张宇童 学习日志

屏幕快照 2019-11-14 下午10.01.06.png

如图所示这样的遐思你受的了吗?


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container {
            width: 1000px;
            height: 400px;
            background: #ddd;
            /*font-size: 0px;*/
        }
        .left {
            width: 300px;
            height: 100px;
            background: #7ac;
            display: inline-block;
        }
        .right {
            width: 500px;
            height: 100px;
            background: #678;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

为什么呢?

最终我们找到div和div之间有一个换行符

屏幕快照 2019-11-14 下午10.09.03.png

我们去掉试试

屏幕快照 2019-11-14 下午10.12.15.png

屏幕快照 2019-11-14 下午10.12.10.png

最后就好了。

当然我们也可以使用font-size:0来做。

标签: CSS html

评论(0) 浏览(442)

float元素详解

2019-11-14 张宇童 学习日志

很多同学可能对于float不太理解这里的float有几点特性

第一点是float脱离文档流 当不脱离文本流

这里说的是什么意思呢?

就是空间与文字的概念。

你可以理解成为一个float:left的元素它脱离了文档是指的在一个容器内不受容器内其他的块级元素影响。

而容器内容文本呢?则会绕开它。

第二点呢就是会尽量靠上

第三就是对于父级元素的影响,怎么理解呢?

就是一个容器我们没有给它设置高度。因为我们的设想是让内容撑开父级元素

而如果我们给内容元素设置了float则会导致父级元素高度塌陷


以下是一张动图。请点击后观看

2019-11-14 20.58.13.gif


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container {
            width: 800px;
            height: 300px;
            background: linear-gradient(0deg, red 0%, green 100%)
        }
        .p1 {
            width: 100px;
            height: 100px;
            background: #ddd;
            float:left;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="p1"></span>
    </div>
    <div class="container">
        <span>我是文字</span>
        <span class="p1">float1</span>
        <span class="p1">float2</span>
        
    </div>
</body>
</html>



下面大家来看一个float三栏布局

屏幕快照 2019-11-14 下午9.44.11.png

<!DOCTYPE html>
<html>
<head>
    <title>float三栏布局</title>
    <style type="text/css">
        .left {
            float: left;
            height: 200px;
            width: 200px;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            background: green;
        }
        .middle {
            height: 200px;
            background: blue;
            margin-left: 200px;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle">经典三栏布局</div>
</body>
</html>

标签: CSS html

评论(0) 浏览(446)

flex弹性盒子布局

2019-11-14 张宇童 学习日志

flex是css专门为布局而诞生的一个属性

用法:

1、首先在外层元素定义一个display:flex

2、在内层元素使用flex: 1

是不是很简单呢?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container {
            display: flex;
            width: 800px;
            height: 300px;
            border: 1px dashed red;
            background:  linear-gradient(0deg, transparent 0, green 30%, red 60%, black 100%)
        }
        .flex {
            flex: 1;
            margin: 5px;
            background: #adc;
        }
        .flex2 {
            flex: 2;
            margin: 5px;
            background: #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex2"></div>
    </div>
</body>
</html>

效果图:

屏幕快照 2019-11-14 下午8.37.35.png

既然flex这么好用为什么没有大规模的使用呢?

原因是很多浏览器不兼容,并且期间有过几次的语法变动

标签: CSS html

评论(0) 浏览(401)

css中的自定义字体

2019-11-12 张宇童 学习日志

<!DOCTYPE html>
<html>
<head>
    <title>自定义字体</title>
    <style type="text/css">
        body{
            font-family: 'IF';
        }
        @font-face{
            font-family: 'IF';
            src: url('./SetoFont-1.ttf');
        }
    </style>
</head>
<body>
hello world
</body>
</html>
屏幕快照 2019-11-12 下午9.50.15.png

标签: CSS

评论(0) 浏览(984)

JavaScript中的先行断言与后行断言

2019-11-12 张宇童 学习日志

let test = 'hello world'
// 后行断言
let res = test.match(/hello(?=\sworld)/)

console.log(res)

// 先行断言
res = test.match(/(?<=hello\s)world/)

console.log(res)

标签: javascript ES6

评论(0) 浏览(510)

JavaScript中的正则命名

2019-11-12 张宇童 学习日志

之前我们使用JS正则匹配的时候我们要使用索引

比如

'hello'.match(/(e)/)[1]
而现在就简单了。可以在小括号里面加上问好尖括号进行分组命名

比如

(?<name>\d+)

console.log('sdafaf2010-10-12fdsfdsfsd'.match(/(?<a>\d{4})-(?<b>\d{2})-(?<c>\d{2})/).groups.a)

标签: javascript ES6

评论(0) 浏览(389)

Symbol.iterator与Symbol.asyncIterator并用Example

2019-11-12 张宇童 学习日志

let obj = {
    count: 0,
    items: {
        names: ['小明', '笑话', '小草'],
        age: [19,20,30],
        haha: ['小小', '大大'],
    },
    Gen(time) {
        return new Promise((resolve, reject) => {
            setTimeout(function() {
                resolve({
                    done: false, value: time
                })
            }, time)
        })
    },
    [Symbol.asyncIterator] () {
        let self = this
        return {
            next() {
                self.count++
                if (self.count < 4) {
                    return self.Gen(Math.random() * 1000)
                }else {
                    return Promise.resolve({done: true, value: ''})
                }
            }
        }
    },
    [Symbol.iterator] () {
        let arr = this.items;
        let keys = Reflect.ownKeys(arr)
        let values = [];
        return {
            next() {
                if (!values.length) {
                    if (keys.length) {
                        values = arr[keys[0]]
                        keys.shift()
                    } else {
                        return { done: true, value: '' }
                    }
                }
                return {
                    value: values.shift(),
                    done: false
                }
            }
        }
    }
}

for (let i of obj) {
    console.log(i)
}

async function test() {
    for await (let i of obj) {
        console.log(i)
    }
}

test()

标签: javascript ES6

评论(0) 浏览(767)

ES9中的for await of

2019-11-11 张宇童 学习日志

function Gen(time) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve(time)
        },time)
    })
} 

async function test() {
    let arr = [Gen(2000), Gen(200), Gen(3000)]
    for(let i of arr) {
        console.log(Date.now())
        console.log(Date.now(), await i.then(console.log))
        console.log(Date.now())
    }
}

test().then(() => {console.log('<<<======华丽分割线======>>>'); testTwo()})

async function testTwo() {
    let arr = [Gen(3000), Gen(300), Gen(2000)]
    for await (let i of arr) {
        console.log(Date.now(), i)
    }
}



屏幕快照 2019-11-11 下午10.39.56.png

标签: javascript ES6

评论(0) 浏览(421)

Powered by emlog