html5 canvas动画-粒子运动的网页

最新推荐文章于 2023-12-12 11:38:25 发布

Sexy cat

最新推荐文章于 2023-12-12 11:38:25 发布

阅读量433

点赞数 2

分类专栏： CSS canvas

本文链接：https://blog.csdn.net/hou7187/article/details/105690225

版权

本文介绍如何使用HTML5的Canvas元素创建粒子运动动画，通过实例展示粒子在网页中的动态效果。

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

canvas动画实现粒子运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas粒子动画</title>
    <style>

    </style>
</head>
<body>

<canvas id="cas" style="z-index: 0;position: absolute;height: 100%" ></canvas>


<script>

     var canvas = document.getElementById("cas");
    var ctx = canvas.getContext("2d");
    resize();
    window.onresize = resize;

    function resize() {
   
        canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
    var RAF = (function() {
   
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
   
            window.setTimeout(callback, 1000 / 60)