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

<!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 Logic App】消费型逻辑应用在消费Service Bus时遇见消息并发速度慢，消息积压

    问题描述 消费型逻辑应用(Consumption Logic App)使用触发器模式消费 Azure Service Bus的消息,当Service Bus中存在大量消息等待消费时,Logic App ...

  2. 【Azure 微服务】记一次错误的更新Service Fabric 证书而引发的集群崩溃而只能重建

    问题描述 错误的操作步骤: 1)更新Service Fabric 的证书,制定了次要证书(Secondary),但是只修改了Service Fabric Cluster证书,而没有指定VMSS(虚拟机 ...

  3. Frechet Inception Distance

    (以下内容重新更新,主要讲解FID的意义,为何FID能够表示生成图像的多样性和质量,为什么FID越小,则图像多样性越好,质量也越好) 在计算FID中我们也同样使用inception network网络 ...

  4. 浅入 ABP 系列（7）：对象映射

    目录 基础 DTO和实体 麻烦的映射 AutoMapper 集成 IObjectMapper/ObjectMapper 对象拓展 写博客的过程中,发现很多基础理论太薄弱,因此很多专业词汇可能会解释错误 ...

  5. 基于 Nebula Graph 构建图学习能力

    本文首发于 Nebula Graph Community 公众号 经常看技术文章的小伙伴可能会留意到除了正在阅读的那篇文章,在文章页面的正文下方或者右侧区域会有若干同主题.同作者的文章等你阅读:经常逛 ...

  6. 记录: OpenAI中转代理API接口服务的使用

    由于OpenAI提供服务的地区列表里没有 China,因此想要方便使用OpenAI API的话就需要用到中转服务. 本文介绍的iDataRiver平台便提供这样的API,且比官方OpenAI还要便宜, ...

  7. 【MongoDB详细步骤】（内附源码）

    第01章-MongoDB 1.安装和启动(docker方式) 1.1.拉取镜像 docker pull mongo:4.4.8 1.2.创建和启动容器 docker run -d --restart= ...

  8. RocketMQ为什么这么快？我从源码中扒出了10大原因！

    大家好,我是三友~~ RocketMQ作为阿里开源的消息中间件,深受广大开发者的喜爱 而这其中一个很重要原因就是,它处理消息和拉取消息的速度非常快 那么,问题来了,RocketMQ为什么这么快呢? 接 ...

  9. Prometheus常用exporter及其常用监控指标

    node-exporter常用监控指标 CPU相关指标: node_cpu_seconds_total{mode="idle"}:CPU空闲时间(秒)的总和.这是评估CPU使用率的 ...

  10. 全栈的自我修养: 002使用@vue/cli进行vue.js环境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发)

    全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...