【html画板】网页画板绘画效果

文章目录

效果图
源代码
注意！！！！

效果图

功能实现：

按钮点击实现相应的功能

源代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><canvas id="myCanvas" width="600" height="300" style="border: 1px solid red; background-color: black ;"></canvas><br /><button style="width: 80PX; background-color: mistyrose;" onclick="xd = '0'">线条</button><button style="width: 80PX; background-color: cornflowerblue;" onclick="xd = '1'">矩形</button><br /><button style="width: 80PX; background-color: yellow;" onclick="linecolor = 'yellow'">YELLOW</button><button style="width: 80PX; background-color: red;" onclick="linecolor = 'red'">RED</button><button style="width: 80PX; background-color: green;" onclick="myFunction()" id="demo">clear</button></body><script type="text/javascript">var myCanvas = document.getElementById("myCanvas");var ctx = myCanvas.getContext("2d");ctx.strokeStyle = "blue";ctx.fillStyle = "palevioletred";//1.先做一个背景  矩形ctx.fillStyle = "black";ctx.fillRect(0, 0, 600, 300);//变量var oldX = 0;var oldY = 0;var onOff = false;var linecolor = "white";var cccc = 0;var xd = 0;//2响应3个鼠标事件，鼠标按下，鼠标移动鼠标弹起//增加监听事件function myFunction() {document.getElementById("demo");cccc = "1";if(cccc == 1) {ctx.clearRect(0, 0, 600, 300);}}myCanvas.addEventListener("mousedown", down);myCanvas.addEventListener("mousemove", move);myCanvas.addEventListener("mouseup", up);function down(event) {console.log(event);onOff = true;oldX = event.pageX - 10;oldY = event.pageY - 10;}function move(event) {console.log(event);if(onOff == true) {var newX = event.pageX - 10;var newY = event.pageY - 10;if(xd == 1) {ctx.beginPath();ctx.clearRect(oldX-4, oldY-4, newX-oldX+10,newY-oldY+10);ctx.strokeRect(oldX,oldY,newX-oldX,newY-oldY);ctx.lineCap = "round";ctx.strokeStyle = linecolor;ctx.lineWidth = 4;ctx.stroke();} else {ctx.beginPath();ctx.moveTo(oldX, oldY);ctx.lineTo(newX, newY);ctx.strokeStyle = linecolor;ctx.lineWidth = 4;ctx.lineCap = "round";ctx.stroke();oldX = newX;oldY = newY;}}}function up() {onOff = false;}</script></html>

注意！！！！

如图，当鼠标往回折的速度过快时，清理画笔跟不上会出现重影，如果有大佬有好的解决方法希望能给笔者解惑！谢

【html画板】网页画板绘画效果相关推荐

java入门之画板及画板重绘（详细版）
关于画板和画板重绘效果图如下(完整代码请看文末): 为什么要重绘在Java中,Swing组件是由开发人员编写好的,所有我们看得见的组件(包括窗体)都是画出来的,当我们改动窗体的大小时,即重新调动了 ...
python 实现简单画板_python 画板示例源码(可做签名/涂鸦)
[实例简介] [实例截图] [核心代码] ''' Created on 2018年8月8日 @author: Freedom ''' from PyQt5.Qt import QWidget, QCo ...
java画板_java 画板画图程序
导读热词下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. import java.awt.*; import javax.swing.*; ...
java创建画板_java画板的设计和创建
首先创建一个画板类继承容器类,这样可以在画板类中重写容器的paint方法. public class DrawFrame extends JPanel 再创建一个类写监听器的程序,以及一个类来写画板的 ...
多人共享协作画板——单机画板
最近由于工作需要,接触到了多人共享协作画板这个东西.在这个过程中,学习到了不少前端的知识,现在正好抽时间来对这一段时间学习的知识做一个总结.我都计划是分几篇博客,对共享画板这一块我理解的知识做一个总结 ...
Canvas实现网页协同画板
目录协同画板相关介绍协同画板实现协同画板实现效果协同画板相关难点和解决方案源码下载协同画板相关介绍画板协同: 简单来说就是使用canvas开发一个可以多人共享的画板,都可以在上面作画画板 ...
网页版几何画板开发笔记(一)
2019独角兽企业重金招聘Python工程师标准>>> 近期在做项目网页版简易几何画板 geo.js. 时间一长, 加上年纪大了, 就容易忘记, 所以这里写下来些笔记. 实现了一个全 ...
超酷的HTML5 Canvas网络画板教程
在今天的HTML教程里,我们要学习一下如何使用HTML5 Canvas实现一个超酷而又简单的网络画板功能.在这个教程中,我们可以选择笔刷的类型.笔刷的大小以及笔刷的颜色,当然作为画板还需要很多功能,这 ...
手写数字识别画板前后端实现 | Flask+深度神经网络
1. 系统概要手写数字识别画板系统,按照MVC原则开发,主要由两部分组成:交互界面(视图View)部分是传统的HTML +CSS+JS网页(这同样也是一种遵循MVC开发方式):手写数字识别部分(模型 ...

【html画板】网页画板绘画效果

文章目录

效果图

源代码

注意！！！！

【html画板】网页画板绘画效果相关推荐

最新文章

热门文章