Web编程大作业(五)在线黑板&弹幕功能(canvas+websocket)

最新推荐文章于 2024-04-22 20:25:02 发布

MorphLing_

最新推荐文章于 2024-04-22 20:25:02 发布

阅读量944

点赞数 2

文章标签： javascript canvas js html websocket

本文链接：https://blog.csdn.net/morphling_/article/details/107032161

版权

在线黑板

前置准备

先用canvas做一个简易版的黑板，能改变笔触的颜色和粗细，并将当前绘图复制到另一个元素上
在这里插入图片描述
这个简易版黑板的代码也可以看一下

<style>
    .can{
    
        border: 2px black solid;
        top:100px;
        margin:auto;
    }
    #show{
    
        border: 2px black solid;
        top:100px;
        height:500px;
        width:500px;
        left:0px;
    }
</style>
<script>
    var color='black';
    var width=5;
    var x1,y1,x2,y2;
    var isMouseDown=false;
    var canvas;
    var context;
    var container;
    window.onload=function(){
    
        canvas=document.getElementById('canvas');
        context=canvas.getContext("2d");
        container=document.getElementById('container');
        container.onmousedown=mouseDownAction;
        document.onmouseup=mouseUpAction;
        canvas.onmousemove=mouseMoveAction;
        console.log(canvas,context);
    }
    function mouseDownAction(e){
    
        isMouseDown=true;
        // console.log(e);
        x1=e.offsetX;
        y1=e.offsetY;
        console.log(x1,y1);
    }
    function mouseUpAction(){
    
        isMouseDown=false;
    }
    function mouseMoveAction(e){
    
        if (isMouseDown){
    
            x2=e.offsetX;
            y2=e.offsetY;
            drawLine(x1,y1,x2,y2);
            x1=x2;
            y1=y2;
        }
    }
    function drawLine(x1,y1,x2,y2){
    
        context.beginPath();
        context.moveTo(x1,y1);
        context.lineWidth=width;
        context.strokeStyle=color;
        context.lineTo(x2,y2);
        console.log(color,width);
        context.stroke();
    }
    function showRange(){
    
        console.log(document.getElementById('width').value);
        width=document.getElementById('width').value/10;
    }
    function showColor(){
    
        console.log(document.getElementById('color').value);
        color=document.getElementById('color').value;
    }
    function broadcast(){
    
        console.log(canvas.toDataURL("image/png",0.92));
        var show=document.getElementById('show');
        show.innerHTML="<img src='"+canvas.toDataURL("image/png",0.92)+"'>'"
    }
    function clearCan(){
    
        context.clearRect(0,0,1000,1000);
    }
</script>
<body>
    <div class='center' id="container">
        <canvas class

最低0.47元/天解锁文章

MorphLing_

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Web编程大作业(五)在线黑板&弹幕功能(canvas+websocket)

目录在线黑板前置准备实现原理一些细节处理弹幕功能前置准备实现原理细节处理效果和代码在线黑板前置准备先用canvas做一个简易版的黑板，能改变笔触的颜色和粗细，并将当前绘图复制到另一个元素上这个简易版黑板的代码也可以看一下<style> .can{ border: 2px black solid; top:100px; margin:auto; } #show{ border: 2px black
复制链接

扫一扫