JQuery和HTML5 Canvas实现弹幕效果
网络编程 发布日期：2024/10/2 浏览次数：1
正在浏览：JQuery和HTML5 Canvas实现弹幕效果
JQuery和HTML5 Canvas两种方法实现弹幕效果:
方法一，JQuery实现。
源码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> --> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>JQuery弹幕</title> <link href="" rel="stylesheet" /> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">方法二，HTML5 Canvas实现。
源码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> --> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Canvas弹幕</title> <link href="" rel="stylesheet" /> <style type="text/css"> #c1{background:#f1f1f1;} span{color:#FFFFFF;} </style> </head> <body> <canvas id="c1" width="600" height="300" > <span>该浏览器不支持html5</span> </canvas> <br /> <input type="text" name='smsg' value="" id="smsg" placeholder="请输入内容" /> <button id="send">发送</button> <!--<button id='start' onclick="startFun('test')">Start</button> <button id='stop' onclick="stopFun()">Stop</button>--> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：手机端js和html5刮刮卡效果