用html5新增标签——canvas实现烟花

最新推荐文章于 2023-12-12 15:40:27 发布

m0_73737249

最新推荐文章于 2023-12-12 15:40:27 发布

阅读量720

点赞数 1

文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/m0_73737249/article/details/127758219

版权

前言

用canva来实现烟花效果

1. 什么是canva标签

Canvas是HTML5的一个新特性，Canvas又叫做画板。顾名思义，我们可以在Canvas上绘制我们需要的图形。最开始，Canvas它是由苹果公司提出的，当时不叫Canvas，叫widget，因为HTML并不存在一套二维的绘图API。Canvas本身是一个HTML元素，需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域，定义区域之后使用JavaScript的脚本绘制图像的HTML元素。

Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。它可以基本的绘制图形，进一步的制作照片，绘制动画，更进一步可以处理和渲染视频。

2.如何实现烟花特效

// 声明
        var can=document.getElementById("can");
        var c=can.getContext("2d");
        var w=can.width=window.innerWidth;
        var h=can.Height=window.innerHeight;
        c.beginPath();
        c.fillStyle = "red";
        c.fillRect(0,0,w,h);
        c.closePath();
        window.onresize=function(){
            w