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

<!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. 【Azure 应用服务】在App Service for Windows中实现反向代理

    问题描述 如何在App Service for Windows(.NET Stack)中,如何实现反向代理呢? 正向代理:客户端想要访问一个服务器,但是它可能无法直接访问这台服务器,这时候这可找一台可 ...

  2. 【Azure 应用服务】基于Azure的CI/CD工具链部署App Service

    问题描述 在中国区Azure中,App Service是否支持CI/CD工具部署呢? Windows 和Linux两个系统都是同样的方法吗? 问题解答 目前中国区Azure支持Windows 和 Li ...

  3. 可视化技术在 Nebula Graph 中的应用

    本文首发于 Nebula Graph Community 公众号 本文整理自 #可视化 on Live 主题直播,在本期直播中 3 位可视化嘉宾讲述了他们眼中的可视化,以及他们在可视化项目实践中踩过的 ...

  4. Jepsen 测试框架在图数据库 Nebula Graph 中的实践

    在本篇文章中主要介绍图数据库 Nebula Graph 在 Jepsen 这块的实践. Jepsen 简介 Jepsen 是一款用于系统测试的开源软件库,致力于提高分布式数据库.队列.共识系统等的安全 ...

  5. Server-side template injection 模板注入问题总结

    概念: 服务器模板注入(Server-side template injection) 攻击者能够使用本地的模板语法去注入一个恶意的payload,然后在服务器端执行该攻击,当与欧股直接输入数据到模板 ...

  6. DOSBox0.74使用Debug时p命令报错

    环境 操作系统:Windows 10 DOSBox 0.74 DEBUG.EXE 从 Windows XP 或其他复制到的DOSBox下 问题 在学习到 王爽的<汇编语言>时,第 4章,第 ...

  7. docker跑es流程再整理

    参考,欢迎点击原文:https://blog.csdn.net/qq_32101993/article/details/100021002(报错) 继老早前一篇文章整理的使用docker-compos ...

  8. 怎样给U盘加密

    给U盘加密其实很简单,下载一个叫U盘超级加密3000的U盘加密软件就可以了. 这款U盘加密的软件最大的特点是不用安装,只要一个exe文件.你把它放到你需要加密的U盘里,就可以加密U盘里的数据了.并且到 ...

  9. [503. 下一个更大元素 II] 单调栈

    import java.util.ArrayDeque; import java.util.Deque; class Solution { public static void main(String ...

  10. django项目(博客一）

    一 项目开发流程 1.需求 分析架构师+产品经理+开发者组长 在跟客户谈需求之前,会大致先了解客户的需求,然后自己先设计一套比较好的方案 在跟客户沟通交流中引导客户往我们之前想好的方案上面靠 形成一个 ...