socketIo+canvas实现互动画板

最新推荐文章于 2021-07-01 11:40:59 发布

小前端龚健

最新推荐文章于 2021-07-01 11:40:59 发布

阅读量872

点赞数

文章标签： node.js javascript css3 html

本文链接：https://blog.csdn.net/gongjian999/article/details/104006268

版权

本文通过结合HTML、CSS和JavaScript技术，并利用socketIo进行实时通信，详细介绍了如何创建一个互动画板。首先展示了HTML布局，接着是CSS样式设定，然后是JavaScript用于处理canvas画布操作，最后讲解了socketIo的实现，实现用户间的画板同步。

摘要由CSDN通过智能技术生成

HTML代码

<canvas id="drawing-board" ></canvas>
        <div class="color-group">
            <ul>
                <li id="white" class="color-item" style="background-color: white;"></li>
                <li id="black" class="color-item active" style="background-color: black;"></li>
                <li id="red" class="color-item" style="background-color: #FF3333;"></li>
                <li id="blue" class="color-item" style="background-color: #0066FF;"></li>
                <li id="yellow" class="color-item" style="background-color: #FFFF33;"></li>
                <li id="green" class="color-item" style="background-color: #33CC66;"></li>
                <li id="gray" class="color-item" style="background-color: gray;"></li>
            </ul>
        </div>
        <div id="range-wrap"><input type="range" id="range" min="1" max="30" value="5" title="调整笔刷粗细"></div>
        <div class="tools">
            <button id="brush" class="active" title="画笔"><i class="iconfont icon-qianbi"></i></button>
            <button id="eraser" title="橡皮擦"><i class="iconfont icon-xiangpi"></i></button>
            <button id="clear" title="清空"><i class="iconfont icon-qingchu"></i></button>
            <button id="undo" title="撤销"><i class="iconfont icon-chexiao"></i></button>
            <button id="save" title="保存"><i class="iconfont icon-fuzhi"></i></button>
        </div>
        <div id="imgcontainer">
            <ul>
                <li class="img-item">
                    <img data-id='0' id='firstView' src="img/1.jpg" alt="">
                </li>
                <li class="img-item">
                    <img data-id='1' src="img/2.jpg" alt="">
                </li>
                <li class="img-item">
                    <img data-id='2' src="img/3.jpg" alt="">
                </li>
                <li class="img-item">
                    <img data-id='3' src="img/4.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>

CSS代码

*{margin:0; padding: 0;user-select: none;}
body{overflow:hidden}
#drawing-board{background: white;cursor: crosshair;width: 100%;height: 100%;}
.tools{position: fixed;left:180px;top: 447px; width:500px;display: flex;justify-content: center;text-align: center}
.tools button{border-radius: 50%;width: 50px;height: 50px;border: 1px solid #eee;outline: none;cursor: pointer;box-sizing: border-box;margin: 0 10px;text-align: center;color:#ccc;line-height: 50px;box-shadow:0 0 8px rgba(0,0,0,0.1); transition: 0.3s;}
.tools button.active,.tools button:active{box-shadow: 0 0 15px #00CCFF; color:#00CCFF;}
.tools button i{font-size: 24px;}
.color-group{position:fixed;width: 30px;left: 30px;top:230px;transform: translate(0,-150px)}
.color-group ul{list-style: none;}
.color-group ul li{width: 30px;height: 30px;margin: 10px 0;border-radius: 50%;box-sizing: border-box;border:3px solid white;box-shadow: 0 0 8px rgba(0,0,0,0.2);cursor: pointer;transition: 0.3s;}
.color-group ul li.active{box-shadow:0 0 15px #00CCFF;}
#range-wrap{position: fixed;top: 22%;left:874px;width: 30px;height: 150px;margin-top: -75px;}
#range-wrap input{transform: rotate(-90deg);width: 1