canvas-弹幕实例

最新推荐文章于 2022-01-01 20:00:46 发布

车厘子：）

最新推荐文章于 2022-01-01 20:00:46 发布

阅读量194

点赞数 1

文章标签： canvas-弹幕实例构造函数调用

本文链接：https://blog.csdn.net/qq_37155370/article/details/102543342

版权

html部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* body{text-align: center} */
    /* 父元素相对定位 */
    .container {
      position: relative;
      width: 856px;
      height: 481px;
    }

    /* 视频元素绝对定位 */
    #v3 {
      position: absolute;
      width: 856px;
      /*视频宽高*/
      height: 481px;
      z-index: 0;
      /*下层*/
    }

    /* 画布元素绝对定位 */
    #c3 {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
  </style>
</head>
<body>
  <h3>弹幕</h3>
  <!-- (1)视频布局 -->
  <!-- 父元素 -->
  <div class="container">
    <!-- 画布元素 -->
    <canvas id="c3" width="856" height="481"></canvas>
    <!-- 视频元素 -->
    <video id="v3" src="../res/x.mp4"></video>
  </div>
  <!-- (2).用户输入框 -->
  <div class="userDiv">
    <!-- 输入框 -->
    <input  type="text" id="inputMsg" placeholder="想说点啥！">
    <!-- 下拉列表 文字 颜色 -->
    <select id="inputFont">
      <option value="12px">--请选择--</option>
      <option value="22px">--中号--</option>
      <option value="32px">--大号--</option>
    </select>
    <select id="inputColor">
      <option value="#f00">--红色--</option>
      <option value="#00f">--蓝色--</option>
      <option value="#000">--黑色--</option>
    </select>
    <!-- 发送按钮 -->
    <input type="button" value="发送" id="inputBtn">
  </div>
  <script src="./js/msg.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>

js部分

主程序【入口程序】

// 主程序，【入口程序】
// 任务
// (1).创建弹幕对象
// (2).接收用户输入文字
// 1.创建函数game 入口
// 1.1创建两个全局变量保存画布与画笔
var c3;
var ctx;
// 1.2创建两个全局变量保存画布宽和高
var canWidth;
var canHeight;
// 1.3创建一个全局变量保存弹幕对象
var msg;
// 1.4创建四个全局变量 输入框、颜色、字体、发送按钮
var inputMsg;
var inputFont;
var inputColor;
var inputBtn; 
function game(){
  init();
  gameloop();
}
// 2.创建函数init  负责所有对象创建并且对象赋值
function init(){
  // 2.1获取画布对象赋值给对象c3
  c3=document.getElementById("c3");
  // 2.2获取画笔对象赋值给对象ctx
  ctx=c3.getContext("2d");
  // 2.2获取画布宽度赋值给对象canWidth;
  canWidth=c3.width;
  // 2.4获取画布高度赋值给对象canHeight;
  canHeight=c3.height;
  // 2.5创建弹幕对象赋值msg
  msg=new msgObj();
  // 2.6调用弹幕对象init函数
  msg.init();
  // 2.7获取输入框值inputMsg
  inputMsg=document.getElementById("inputMsg");
  // 2.8获取文字大小列表inputFont
  inputFont=document.getElementById("inputFont")
  // 2.9获取文字颜色赋值inputColor
  inputColor=document.getElementById("inputColor")
  // 2.10获取发送按钮
  inputBtn=document.getElementById("inputBtn")
  // 2.11为按钮搬定事件并且指定事件处理函数handleMsg
  inputBtn.addEventListener("click",handleMsg)
}
// 3.创建函数gameloop 创建定时器
function gameloop(){
  // 3.1创建定时器
  requestAnimationFrame(gameloop);
  // 3.2调用弹幕绘制方法
  msg.draw();
}
// 4.将main.js添加到html中
// 5.当页面加载成功事件触发调用game
document.body.onload=game;
// 6.创建函数处理用户输入内容
function handleMsg(){  
  // 6.1获取用户输入内容文字；颜色；大小
  var m=inputMsg.value;
  var c=inputColor.value;
  var f=inputFont.value;
  // 6.2将数据装换成js对象
  var obj={
    msg:m,
    font:f,
    color:c
  };
  // 6.3将数据传递msg.add
  msg.add(obj);
}

功能模块：保存弹幕相关所有数据和行为

// 功能：保存弹幕相关所有数据和行为
// 1.创建构造函数msgObj
var msgObj=function(){
  // console.log("msgobj")
  // 弹幕文字x,y坐标
  this.x=[];
  this.y=[];
  this.m=[];// 弹幕文字
  this.spd=[];// 弹幕速度
  this.font=[];// 弹幕字体
  this.color=[];// 弹幕颜色
  this.alive=[];// 弹幕状态true显示false隐藏 
}
  // 2.为构造函数添加属性 num
  msgObj.prototype.num=100;
  // 3.为构造函数添加方法 init
  msgObj.prototype.init=function(){
    // console.log("这是msg.js下的init构造函数，在main.js中调用")
    // 3.1创建循环遍历所有弹幕
    for(var i=0;i<this.num;i++){
    // 3.2赋值x
    this.x[i]=canWidth;
    // 3.3赋值y
    // 用户输入完成在随机选位置
    this.y[i]=0;
    // 3.4赋值m文字
    this.m[i]="";
    // 3.5赋值文字大小写与颜色
    this.font[i]="12px"
    this.color[i]="#fff";
    // 3.6赋值spd
    this.spd[i]=3;
    // 3.7赋值alive状态
    this.alive[i]=false; 
    } 
    console.log(this)
  }
  // 4.为构造函数添加方法 draw 绘制
  msgObj.prototype.draw=function(){
    // console.log("这是msg.js下的draw构造函数,在main.js中调用");
    // 4.01清除画布
    ctx.clearRect(0,0,canWidth,canHeight);
    // 4.1创建循环遍历每个弹幕文字
    for(var i=0;i<this.num;i++){
    // 4.2判断当前文字是否是显示状态
      if(this.alive[i]){
    // 4.3获取当前文字颜色
        ctx.font=this.font[i]+" SimHei";
    // 4.4获取当前文字大小     
         ctx.fillStyle=this.color[i];
    // 4.5获取当前文字内容
        var m=this.m[i];
    // 4.6修改文字速度
        this.x[i]-=this.spd[i];
    // 4.7绘制文本
       ctx.fillText(m,this.x[i]--,this.y[i]) 
      //4.8判断文字移出画布 
      if(this.x[i]<0){
        // 4.8.1:将当前文字状态修改false
        this.alive[i]=false;
        // 4.8.2:修改文字x
        this.x[i]=canWidth;
      } 
      }
    } 
  }
  // 5.测试
  // var obj=new msgObj();
  // obj.init();
  // obj.draw();
  // 7.在main.js中
  // 8.用户输入添加一个新的弹幕
  // 功能:
  // (1)参数：obj
  // (2)如果产生弹幕
  // 按顺序查找第一个状态为false，显示
  msgObj.prototype.add=function(obj){
    console.log(obj)
    // 1.创建循环遍历所有弹幕
    for(var i=0;i<this.num;i++){
    // 2.判断当前状态是否为false
    if(this.alive[i]==false){
      // 3.是否为false(选中)
      // 4.8
      // 4.修改状态为true
      this.alive[i]=true;  
    // 5.随机分配y
    this.y[i]=20+Math.random()*canHeight;
    // 6.随机分配速度,+1去除0
    this.spd[i]=1+Math.random()*4;
    // 7.指定字体，依赖参数
    this.font[i]=obj.font; 
    // 8.指定颜色，依赖参数
    this.color[i]=obj.color;
    // 9.指定内容
    this.m[i]=obj.msg;
    console.log(this.font[i])
    // 10.返回，一次挑一个 
    return;
     }
    } 
  }