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

最新推荐文章于 2025-07-04 16:39:57 发布

Syyyyy_

最新推荐文章于 2025-07-04 16:39:57 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： canvas

本文链接：https://blog.youkuaiyun.com/weixin_43859703/article/details/88634983

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=function(X,Y){
            this.x=X;
            this.y=Y;
            this.color=this.randomcolor();