js+canvas画布制作烟花

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

HH______926

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

阅读量874

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/HH______/article/details/127833081

版权

这篇博客介绍了如何利用JavaScript和HTML5的Canvas元素创建一个自动绽放的烟花效果。主要步骤包括：将HTML和Body铺满屏幕，获取并设置Canvas画布，填充画布为黑色，创建烟火对象并设置其属性，绘画烟花，创建烟花烟雾拖尾效果，以及通过定时器自动触发烟花绽放。最终实现了一个在画布上循环绽放的绚丽烟花秀。

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

先看看烟花自动播放效果：

实现步骤如下：

1.将html与body填满整个屏幕

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

2.获取画布，设置宽高，调用getContext方法

var myCanvas = document.getElementsByTagName("canvas")[0];
var ctx = myCanvas.getContext('2d');
//规定画布大小
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;

3.创建方法，用于将画布填充成黑色