欢迎来到甘丰迟的博客,更新中...

canvas 弹幕

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid #333;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <p align="center">
    内容:<input type="text" id="text">
    字号:
    <select id="size">
        <option value="18px">小</option>
        <option value="22px">中</option>
        <option value="26px">大</option>
    </select>
    颜色:
    <select id="color">
        <option value="#000">黑色</option>
        <option value="#00f">蓝色</option>
        <option value="#0f0">绿色</option>        
    </select>
    速度:
    <select id="speed">
      <option value="3">标准</option>
      <option value="1">慢的</option>
      <option value="6">快的</option>
    </select>
    <input type="button" value="发送" onclick="send()">
  </p>
  <script>
    let canvasEle = document.getElementById('canvas');
    let ctx = canvasEle.getContext('2d');
    canvasEle.width = 640;
    canvasEle.height = 360;
    let texts = [
      '这个演员演得好烂',
      '这是什么剧情呀，编剧光想挣钱了',
      'HTML5',
      'CSS3',
      'JavaScript'
    ];

    //发送弹幕
    function send(){

      //**********获取弹幕的数据***********// 

      //获取弹幕文本框对象
      let textEle = document.getElementById('text');
      //获取弹幕文本框对象的值
      let textVal = textEle.value;
      //获取弹幕字号列表框对象
      let sizeEle = document.getElementById('size');
      //获取弹幕字号列表框对象的值
      let sizeVal = sizeEle.value;
      //获取弹幕颜色列表框对象
      let colorEle = document.getElementById('color');
      //获取弹幕颜色列表框对象的值
      let colorVal = colorEle.value;
      //获取弹幕速度列表框对象
      let speedEle = document.getElementById('speed');
      //获取弹幕速度列表框对象的值
      let speedVal = speedEle.value;

      //**********将获取弹幕的数据填充到Barrage对象中***********// 
      let barrage = new Barrage(textVal,sizeVal,colorVal,speedVal);

      //**********将填充后的Barrage对象添加到barrages数组中+***********// 
      barrages.push(barrage);

    }

    //弹幕类
    class Barrage {
      constructor(text,size,color,speed) {
        //弹幕文本内容
        this.text = text;
        //弹幕文本的X轴
        this.x = canvasEle.width - 30;
        //弹幕文本的Y轴(弹幕存在上、下各20像素的边距)
        this.y = Math.ceil(Math.random() * 320) + 20;
        //弹幕文本的颜色
        this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`;
        // 弹幕文本的字体样式
        this.font = size + ' Microsoft yahei';
        // 弹幕文本的速度
        this.speed = speed;
      }
    }

    let barrages = [];

    function init() {
      for (let n = 0; n < texts.length; n++) {
        let barrage = new Barrage(texts[n],'24px','#f00',5);
        barrages.push(barrage);        
        //修改文本颜色
        ctx.fillStyle = barrage.color;
        //修改文本字体样式
        ctx.font = barrage.font;
        //绘制文本
        ctx.fillText(barrage.text, barrage.x, barrage.y);
      }
      //console.log(barrages);
    }

    function animation() {
      ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
      
      for (let n = 0; n < barrages.length; n++) {
        //每一个弹幕文本对象
        let barrage = barrages[n];
        //修改弹幕文本的颜色
        ctx.fillStyle = barrage.color;
        //修改文本字体样式
        ctx.font = barrage.font;
        //弹幕文本对象的X轴在上一个X轴位置的基础上向左移动
        barrage.x -= barrage.speed;
        //绘制文本
        ctx.fillText(barrage.text, barrage.x, barrage.y);
      }
      //循环绘制动画帧
      window.requestAnimationFrame(animation);
    }


    init();
    animation();
  </script>
</body>

</html>

视频弹幕

<!DOCTYPE html>
<html>

<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>Custom HTML5 Video Player</title>
  <link rel="stylesheet" href="styles/style.css" type="text/css">
  <style>
    #mask{
      z-index: 50;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
  }
  #canvas{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 49;
  }
  </style>
</head>

<body>
  <div class="container">
    <div class="video-container" id="video-container">
      <div id="mask"></div>
      <canvas id="canvas"></canvas>
      <!-- 视频元素开始 -->
      <video class="video" id="video" preload="metadata" poster="poster/poster.jpg">
        <source src="video/video.mp4" type="video/mp4">
        </source>
      </video>
      <!-- 视频元素结束 -->
      <!-- 视频控制按钮开始 -->
      <div class="video-controls" id="video-controls">
        <div class="video-progress">
          <progress id="progress-bar" value="0" min="0"></progress>
          <input class="seek" id="seek" value="0" min="0" type="range" step="1">
        </div>
        <div class="bottom-controls">
          <div class="left-controls">
            <button id="control-button">
              <img src="icons/play.png" alt="" id="control-icon">
            </button>
            <div class="volume-controls">
              <button id="volume-button">
                <img src="icons/volume-on.png" alt="" id="volume-icon">
              </button>
              <input class="volume" id="volume" data-volume="0.5" value="0.5" type="range" max="1" min="0" step="0.01">
            </div>
            <div class="time">
              <time id="time-elapsed">00:00</time>
              <span> / </span>
              <time id="duration">00:00</time>
            </div>
          </div>
          <div class="right-controls">
            <button id="fullscreen-button">
              <img src="icons/fullscreen.png" alt="" id="fullsceen-icon">
            </button>
          </div>
        </div>
      </div>
      <!-- 视频控制按钮结束 -->
      
      <!-- 弹幕区域结束 -->

    </div>
    <!-- 弹幕区域开始 -->
    <div id="barrage">
      <p align="center">
        内容:<input type="text" id="text">
        字号:
        <select id="size">
            <option value="18px">小</option>
            <option value="22px">中</option>
            <option value="26px">大</option>
        </select>
        颜色:
        <select id="color">
            <option value="#000">黑色</option>
            <option value="#00f">蓝色</option>
            <option value="#0f0">绿色</option>        
        </select>
        速度:
        <select id="speed">
          <option value="3">标准</option>
          <option value="1">慢的</option>
          <option value="6">快的</option>
        </select>
        <input type="button" value="发送" onclick="send()">
      </p>
    </div>
  </div>
  <script src="scripts/video.js"></script>
  <script src="scripts/canvas.js"></script>
</body>

</html>

let canvasEle = document.getElementById('canvas');
let ctx = canvasEle.getContext('2d');
canvasEle.width = 800;
canvasEle.height = 340;
//弹幕类
class Barrage {
  constructor(text, size, color, speed) {
    //弹幕文本内容
    this.text = text;
    //弹幕文本的X轴
    this.x = canvasEle.width - 30;
    //弹幕文本的Y轴(弹幕存在上、下各20像素的边距)
    this.y = Math.ceil(Math.random() * 320) + 20;
    //弹幕文本的颜色
    this.color = color;
    // 弹幕文本的字体样式
    this.font = size + ' Microsoft yahei';
    // 弹幕文本的速度
    this.speed = speed;
  }
}

let barrages = [];

function init() {
  for (let n = 0; n < texts.length; n++) {
    let barrage = new Barrage(texts[n], '24px', '#f00', 5);
    barrages.push(barrage);
    //修改文本颜色
    ctx.fillStyle = barrage.color;
    //修改文本字体样式
    ctx.font = barrage.font;
    //绘制文本
    ctx.fillText(barrage.text, barrage.x, barrage.y);
  }
  //console.log(barrages);
}

function animation() {
  ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);

  for (let n = 0; n < barrages.length; n++) {
    //每一个弹幕文本对象
    let barrage = barrages[n];
    //修改弹幕文本的颜色
    ctx.fillStyle = barrage.color;
    //修改文本字体样式
    ctx.font = barrage.font;
    //弹幕文本对象的X轴在上一个X轴位置的基础上向左移动
    barrage.x -= barrage.speed;
    //绘制文本
    ctx.fillText(barrage.text, barrage.x, barrage.y);
  }
  //循环绘制动画帧
  window.requestAnimationFrame(animation);
}

//发送弹幕
function send() {

  //**********获取弹幕的数据***********// 

  //获取弹幕文本框对象
  let textEle = document.getElementById('text');
  //获取弹幕文本框对象的值
  let textVal = textEle.value;
  //获取弹幕字号列表框对象
  let sizeEle = document.getElementById('size');
  //获取弹幕字号列表框对象的值
  let sizeVal = sizeEle.value;
  //获取弹幕颜色列表框对象
  let colorEle = document.getElementById('color');
  //获取弹幕颜色列表框对象的值
  let colorVal = colorEle.value;
  //获取弹幕速度列表框对象
  let speedEle = document.getElementById('speed');
  //获取弹幕速度列表框对象的值
  let speedVal = speedEle.value;

  //**********将获取弹幕的数据填充到Barrage对象中***********// 
  let barrage = new Barrage(textVal, sizeVal, colorVal, speedVal);

  //**********将填充后的Barrage对象添加到barrages数组中+***********// 
  barrages.push(barrage);

}

let texts = [
  '这个演员演得好烂',
  '这是什么剧情呀，编剧光想挣钱了',
  'HTML5',
  'CSS3',
  'JavaScript'
];

init();
animation();

# canvas 弹幕

# 视频弹幕

canvas 弹幕

视频弹幕