canvas 绘制的仿 mock 主页动画效果

最新推荐文章于 2023-02-23 15:54:18 发布

置顶

「已注销」

最新推荐文章于 2023-02-23 15:54:18 发布

阅读量296

点赞数 2

分类专栏： canvas 文章标签： canvas 动画

本文链接：https://blog.csdn.net/Surrakin/article/details/82747694

版权

这篇博客介绍了一个利用canvas绘制的仿mock主页动画，首先通过原点动态展示自定义文字，然后在2秒后将原点放大并分散，进行不规则运动，提供了多行字符串快速更改文字的方法。

摘要由CSDN通过智能技术生成

canvas 画的仿 mock 主页动画

前2秒用一些原点动态显示自定义文字
2秒后原点变大并四散开来，并做不规则运动
可以通过多行字符串快速更改文字

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
    
    padding: 0;
    margin: 0; 
}
</style>
</head>
<body>

<canvas id="canvas"></canvas>

<script>

let flicker = (function() {
    
	
    let canvas       =  document.getElementById("canvas"),
        ctx          =  canvas.getContext("2d"),
	
        // 设置画布宽高
        width        =  document.documentElement.clientWidth,
        height       =  document.documentElement.clientHeight,
			
        // 文字定位
        positionX    =  width / 97,
        positionY    =  250,
	
        // 圆点状态
        radius       =  7,
        transparent  =  1,
        count        =  0,

        idx          =  0,
        extract      =  0,
        renderArr_1  =  [],
        renderArr_2  =  [],
        stepArr      =  [],
        randomAdd    =  [];

    canvas.height = height;
    canvas.width = width;
    canvas.style.backgroundColor = "#56BC8A";

    let _C = {
    
			
        // 绘制文字
        word: function() {
    
            ctx.fillText("加载中 ...", width / 2 - 50, 480);	
            ctx.font = "25px 黑体";	
        },	

        // 绘制圆点
        draw: function() {
    
            this.init();
            let me = this;
            // 开启定时器
            setInterval(function() {
    
                idx++;
                positionY = 250;
                ctx.clearRec