用JS怎么写个画板性能？
发布时间：2022-04-07 16:00:55 所属栏目：语言 来源：互联网
导读：用JS怎么写个画板功能？对于画板功能，我们比较常见是电子教室里的电子黑板，能够经常画画和签字操作，那么我们想要用JS来实现要怎么做呢？ 本文特点： 原生JS 封装好的模块 最简代码样例 !DOCTYPE html html lang=en head meta charset=UTF-8 meta http-equ
|
用JS怎么写个画板功能？对于画板功能，我们比较常见是电子教室里的电子黑板，能够经常画画和签字操作，那么我们想要用JS来实现要怎么做呢？ 本文特点： 原生JS 封装好的模块 最简代码样例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="canvas"></canvas> <script> let c = document.getElementById('canvas'); c.width = window.innerWidth; c.height = window.innerHeight; let ctx = c.getContext('2d'); // draw one black board ctx.fillStyle = "black"; ctx.fillRect(0,0,600,300); // 按下标记 let onoff = false, oldx = -10, oldy = -10; // 设置颜色 let linecolor = "white"; // 设置线宽 let linw = 4; // 添加鼠标事件 // 按下 c.addEventListener('mousedown', event => { onoff = true; // 位置 - 10是为了矫正位置，把绘图放在鼠标指针的顶端 oldx = event.pageX - 10; oldy = event.pageY - 10; },false); // 移动 c.addEventListener('mousemove', event => { if(onoff == true){ let newx = event.pageX - 10, newy = event.pageY - 10; 代码讲解 思路 1、鼠标按下，开始描画。鼠标按下事件。 2、鼠标弹起，结束描画。鼠标弹起事件。 3、鼠标按下移动，路径画线。鼠标移动事件。 代码讲解 整体思路：按下鼠标，触发移动的开关，移动后开始记录线条（用移动后的坐标-移动前的坐标，然后绘线），每次移动都会更新旧坐标。松开鼠标后，释放移动开关。 1、只有在鼠标按下，才会触发移动绘图的效果，所以需要增加一个状态判断。 2、因为鼠标指针和实际位置有一个偏移量，所以在坐标定位的时候，需要增加pagex-10从而使坐标位于指针的尖端处。 3、每次移动都要更新坐标位置，用小段的线段来模拟不规则的线。 （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
