功能：使用画笔绘制笔迹（线条）、橡皮檫

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>js实现电子白板</title>

</head>

<body>

    <canvas id="canvas" width="500px" height="500px" style="border: 3px solid black;"></canvas>

    <br>

    <button onclick="show()">显示</button>

    <button onclick="hide()">隐藏</button>

    <button onclick="clearAnnote()">清空</button>

    <button id="xiangpicha" onclick="xiangpicha()">橡皮檫</button>

    <script>

        var canvas = document.getElementById("canvas");

        var ctx = canvas.getContext("2d");

        var state_bi = true;

        var state_press = false;

        var lastX, lastY;

        var state_xiangpicha = false;

        function show(){

            canvas.style.display = "block";

            state_bi = true;

        }

        function hide(){

            canvas.style.display = "none";

            state_bi = false;

        }

        function clearAnnote(){

            ctx.clearRect(0,0,canvas.width, canvas.height);

        }

        function xiangpicha(){

            state_xiangpicha = state_xiangpicha == true ? false : true;

            if(state_xiangpicha){

                document.getElementById("xiangpicha").innerText = "关闭橡皮檫";

                state_bi = false;

            }else{

                document.getElementById("xiangpicha").innerText = "橡皮檫";

                state_bi = true;

            }

        }

        canvas.addEventListener("mousedown", (e)=>{

            state_press = true;

            if(state_bi){

                [lastX, lastY] = [e.offsetX, e.offsetY];

            }

            if(state_xiangpicha){

                ctx.clearRect(e.offsetX - 3, e.offsetY - 3, 6, 6);

            }

        })

        canvas.addEventListener("mousemove", (e)=>{

            if(state_bi && state_press){

                drawLine(lastX, lastY, e.offsetX, e.offsetY);

                [lastX, lastY] = [e.offsetX, e.offsetY];

            }

            if(state_xiangpicha && state_press){

                ctx.clearRect(e.offsetX - 3, e.offsetY - 3, 6, 6);

            }

        })

        canvas.addEventListener("mouseup", (e)=>{

            state_press = false;

        })

        function drawLine(x1, y1, x2, y2){

            ctx.beginPath();

            ctx.moveTo(x1, y1);

            ctx.lineTo(x2, y2);

            ctx.lineWidth = 3;

            ctx.strokeStyle = "#FF0000";

            ctx.stroke();

        }

    </script>

</body>

</html>

js实现电子白板的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  7. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

  9. 干货分享：让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  10. JS核心系列：理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

随机推荐

  1. Linux查看文件大小、磁盘使用情况

    1.显示磁盘的可用情况: df -h 2.显示文件夹大小 du -ka folder | sort -rnk 1 | head -n 10

  2. 【Azure 事件中心】Event Hubs如何获取其中存放的历史消息

    问题描述 使用Azure Event Hub服务,除了正常的生产,消费消息以外,如果想拿到Event Hub中存储的历史消息?有什么方法呢? 问题解答 获取 Event Hubs 存储的历史消息,首先 ...

  3. Python实现ARP攻击

    目录 概述 ARP协议 IP转MAC 结构 ARP扫描 开始欺骗 中间人 其他 ARP老化 防御 windows linux 概述 高中的时候,学校有一个商店,会放开WIFI给偷偷带手机去学校的我们使 ...

  4. Java 从键盘上输入"year"“month”和“day”，要求通过程序输出 输入的日期为第几年的第几天

    1 /** 2 * 编写程序: 3 * 从键盘上输入"year""month"和"day",要求通过程序输出 4 * 输入的日期为第几年的第 ...

  5. Thinkphp6 自定义命令创建类文件

    以创建控制器为例 1.先通过 think 命令创建一个make文件,效果如下图: php think make:command make/MyController 2.修改上面创建的文件[MyCont ...

  6. 如何将应用一键部署至多个环境？丨Walrus教程

    在 Walrus 平台上,运维团队在资源定义(Resource Definition)中声明提供的资源类型,通过设置匹配规则,将不同的资源部署模板应用到不同类型的环境.项目等.与此同时,研发人员无需关 ...

  7. liunx 设置默认python版本方法，

    Linux 中把Python3设为默认Python版本的几种方法 由于工作中要用到到python3.6  而服务器是2.7 ,这个低版本的2.7很多系统都要依赖,还不能删,同事建议建一个虚拟环境,但是 ...

  8. XAF Blazor 中使用 Blazor 组件

    前言 文章的标题是不是感觉有点奇怪,但实际我们在XAFBlazor中使用Blazor组件是很繁琐的,我们需要将Blazor组件封装成属性编辑器(PropertyEditor),再用非持久化对象(Non ...

  9. masscode.io snippets 和 vscode 联动 代码片段

    https://masscode.io/ 软件作用 代码片段 vscode 可以联动使用 下载不行 慢的话, 下载 fastgithub,打开后再下载

  10. pollute 污染 pol=por=pro 向前 lut=释放 结合ps软件里面lut概念记忆

    pollute 污染 pol = por = pro = 向前 lut = 释放 (ps里面有lut的概念) e 动词 向前释放 -> 污染 弄脏 简单记忆 poll / ute poll - ...