分屏html在线编辑,JavaScript之类操作：HTML5 canvas多分屏示例

JavaScript之类操作：HTML5 canvas多分屏示例

发布时间：2018-09-20 12:40,

浏览次数：533

, 标签：

JavaScript

HTML

canvas

HTML5中用户播放视频的方式：Canvas可以渲染图像播放，Video可以播放视频源数据。这里通过JavaScript的类来写一个多分屏的画布效果，Video标签的类似。目标要求：(1)实现canvas对象的选择边框效果(2)实现多分屏的切换，支持1、4、6、9、10、16等分屏。

实现源码

for="cmbScreenNumbers">分屏数量:

οnchange="Screens(this.value)"> 1=1x1

value="4" selected="selected">4=2x2

6=2x3

9=3x310=1+9

value="16">16=4x4

style="width:1000px;height:400px;border:1px solid #00ffff">

效果展示

1分屏：

4分屏：

6分屏：

9分屏：

10分屏：

16分屏：

html5 canvas:http://www.runoob.com/html/html5-canvas.html

真实视频播放