canvas 绘制简单的小球爆炸效果（原生js ）

最新推荐文章于 2024-07-13 16:23:22 发布

Syyyyy_

最新推荐文章于 2024-07-13 16:23:22 发布

阅读量1.4k

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/weixin_43859703/article/details/88634983

版权

本文详细介绍了如何利用HTML5 canvas元素和原生JavaScript来创建一个引人注目的小球爆炸效果。通过绘制多个小球并模拟它们的运动轨迹，实现了一种视觉上的爆炸动画。这个教程适合对canvas有一定了解并希望提升动态图形技能的开发者。

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

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

        html, body {
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }

    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var can=document.getElementById("canvas");
    can.width=window.innerWidth;
    can.height=window.innerHeight;
    var canvas=can.getContext("2d");
    var balls=[];//存放小球
    //创建对象
    function ball(){
        this.x=null;
        this.y=null;
        this.color=null;
        this.r=null;
        this.angle=null;//小球偏移量
        this.anglex=null;
        this.angley=null;
        //初始状态的小球
        this.int=functi