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

Posted boonya

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之类操作：HTML5 canvas多分屏示例相关的知识，希望对你有一定的参考价值。

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

实现源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        class UILayout
        
            static SetScreenNumber(num) 
                UILayout.ScreenNumber = num;
            

            static GetScreenNumber() 
                return UILayout.ScreenNumber;
            

            static SetContainer(id) 
                UILayout.Container = document.getElementById(id);
            

            static GetContainer() 
                return UILayout.Container;
            

            static SetVideoWith(VideoWidth) 
                UILayout.VideoWidth = VideoWidth;
            

            static GetVideoWith() 
                return UILayout.VideoWidth ;
            

            static SetVideoHeight(VideoHeight) 
                UILayout.VideoHeight = VideoHeight;
            

            static GetVideoHeight() 
                return UILayout.VideoHeight  ;
            

            static SetSelectVideoIndex(index) 
                UILayout.SelectVideoIndex = index;  
            

            static GetSelectVideoIndex() 
                return UILayout.SelectVideoIndex;
            

            static Init(id,screenNums)
            
                UILayout.SetContainer(id);
                UILayout.SetScreenNumber(screenNums);
                UILayout.SetVideoWith(352);
                UILayout.SetVideoHeight(288);
                UILayout.SetSelectVideoIndex(-1);
                UILayout.CreateCanvas();
                UILayout.LayoutScreens(screenNums);
            

            static CreateCanvas() 
                for (var i = 1; i <= 16; i++) 
                    //显示画布
                    var canvas = document.createElement('canvas');
                    canvas.width = UILayout.GetVideoWith();
                    canvas.height = UILayout.GetVideoHeight();
                    canvas.style.border = "1px solid black";
                    canvas.style.cssFloat = "left";
                    this.Container.append(canvas);

                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = "gray";
                    ctx.fillRect(1, 1, canvas.width, canvas.height);
                
            

            static ContainsScreen(num) 
                var screens = [1, 4, 6, 9, 10, 16];
                for (var i = 0; i < screens.length; i++) 
                    if (screens[i] == num) 
                        return true;
                    
                
                return false;
            

            static LayoutScreens(num) 
                if (num == undefined) 
                    console.log("LayoutScreens num is undefined");
                 else if (!UILayout.ContainsScreen(num)) 
                    console.log("LayoutScreens num is not in  [1, 4, 6, 9, 10, 16]");
                    return;
                 else 
                    this.ScreenNumber = num;
                
                
                for (var i = 1; i <= this.Container.childElementCount; i++) 
                    var video = this.Container.childNodes.item(i);
                    video.index = i;
                    video.style.margin = "1px";
                    video.parentContainer = this.Container;
                    video.onclick = function () 
                        UILayout.SelectVideoIndex = this.index;
                        alert(UILayout.SelectVideoIndex);
                        for (var i = 1; i <= this.parentContainer.childElementCount; i++) 
                            if (i === UILayout.SelectVideoIndex) 
                                this.style.border = "1px solid #00FF00";
                             else 
                                this.parentContainer.childNodes.item(i).style.border = "1px solid black";
                            
                        
                    ;
                    if (this.ScreenNumber < i) 
                        video.style.display = "none";
                     else 
                        video.style.display = "block";
                    
                

                var width = parseInt(this.Container.style.width.replace("px", ""));
                var height = parseInt(this.Container.style.height.replace("px", ""));
                var count = 0;
                for (var i = 1; i <= this.Container.childElementCount; i++) 
                    var video = this.Container.childNodes.item(i);
                    if (this.ScreenNumber == 1 && video.index == 1) 
                        video.style.width = (width - 5)+"px";
                        video.style.height = (height-5)+"px";
                        count++;
                     else if (this.ScreenNumber == 4 && video.index <=4) 
                        video.style.width = (width/2 -5) + "px";
                        video.style.height =(height / 2-5) + "px";
                        count++;
                     else if (this.ScreenNumber == 6 && video.index <= 6) 
                        video.style.width = (width / 2-5) + "px";
                        video.style.height = (height / 3-5) + "px";
                        count++;
                     else if (this.ScreenNumber == 9 && video.index <= 9) 
                        video.style.width = (width / 3-5) + "px";
                        video.style.height = (height / 3-5) + "px";
                        count++;
                     else if (this.ScreenNumber == 10 && video.index <= 10) 
                        if (video.index==1) 
                            video.style.width = (width / 5 *4- 5)  + "px";
                            video.style.height = (height /5 *4 - 10) + "px";
                         else 
                            video.style.width = (width / 5 - 5)  + "px";
                            video.style.height = (height / 5 - 5) + "px";
                        
                        if (video.index == 10)
                        
                            video.style.cssFloat = "right";
                            video.style.marginRight = "3px";
                        
                        count++;
                    
                    else if (this.ScreenNumber == 16 && video.index <= 16) 
                        video.style.width =( width / 4-5) + "px";
                        video.style.height = (height / 4 - 5) + "px";
                        video.style.cssFloat = "left";
                        video.style.margin = "1px";
                        count++;
                    
                    if (count == this.ScreenNumber )
                    
                        break;
                    
                
            
        

        window.onload = function ()
        
            UILayout.Init("player",4);
        

        function Screens(num)
        
            UILayout.LayoutScreens(num);
        

    </script>
</head>
<body>
    <label for="cmbScreenNumbers">分屏数量:</label>
    <select id="cmbScreenNumbers" onchange="Screens(this.value)">
        <option value="1">1=1x1</option>
        <option value="4" selected="selected">4=2x2</option>
        <option value="6">6=2x3</option>
        <option value="9">9=3x3</option>
        <option value="10">10=1+9</option>
        <option value="16">16=4x4</option>
    </select>
    <div id="player" style="width:1000px;height:400px;border:1px solid #00ffff">
    </div>
</body>
</html>

效果展示

1分屏：

4分屏：

6分屏：

9分屏：

10分屏：

16分屏：

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

真实视频播放

 

 

以上是关于JavaScript之类操作：HTML5 canvas多分屏示例的主要内容，如果未能解决你的问题，请参考以下文章

使用 javascript 将画布添加到页面

Html5之canvas重叠矩形getContextfillStylefillRect

Html5之canvas笑脸getContextbeginPathmoveToarcstroke

确定 HTML5 画布中字符串的宽度

Html5之canvas清除特定矩形getContextfillStylefillRectclearRectstrokeRect

Html5之canvas三角形getContextbeginPathmoveTolineTofillclosePathstroke