JavaScript 简易画板

html 5 canvas只是一个容器,想要画出东西全部依赖于JavaScript.感觉什么都离不开这个JavaScript脚本.

简易画板核心代码:

<script>var start = false;//绘制开关是否开始?
        window.onload = function(){var cvs = document.getElementById("cvs");var cxt = cvs.getContext("2d");//鼠标在画板上按下
            cvs.onmousedown = function(){//1.获取鼠标的坐标var x = event.offsetX;var y = event.offsetY;//2.把画笔移到当前位置
                cxt.moveTo(x,y);//3.打开绘制开关
                start = true;//4.获取并设置画笔颜色var color = document.getElementById("color").value;cxt.strokeStyle = color;//5.重新设置路径
                cxt.beginPath();//6.阻止默认程序
                event.preventDefault();}//鼠标在画板上移动
            cvs.onmousemove = function(){if(start){//1.获取鼠标的新坐标var x = event.offsetX;var y = event.offsetY;//2.绘制线条到该位置
                    cxt.lineTo(x,y);cxt.stroke();}}//鼠标释放
            cvs.onmouseup = function(){//1.关闭绘制开关
                start = false;//2.关闭画笔的路径
                cxt.closePath();}//鼠标移出画板
            cvs.onmouseout = function(){//1.关闭绘制开关
                start = false;//2.关闭画笔的路径
                cxt.closePath();}}</script>

效果图如下:

转载于:https://www.cnblogs.com/qihangzj/p/6610810.html

JavaScript 简易画板相关推荐

html实现画板的基本操作,javascript实现画板功能
本文实例为大家分享了javascript实现画板功能的具体代码,供大家参考,具体内容如下画板功能的实现 *{ margin: 0; padding: 0; list-style: none; } b ...
qt制作一个画板_Qt 一个简易画板实现(Graphics View).pdf
Qt ⼀个简易画板的实现(Graphics View) Qt 学习之路(32): ⼀个简易画板的实现(Graphics View) 这⼀次将介绍如何使⽤ Graphics View 来实现前⾯所说的画 ...
基于QGraphicsView的简易画板EasyCanvas -- 第一版
最近使用 QGraphicsView 做了个简易的画板 EasyCanvas ,界面效果如下: 具有如下功能: 画布设置图元添加和修改保存为图片第二版已更新基于QGraphicsView的简易 ...
Qt Creator实现简易画板代码解析【工具栏】【画板】
演示效果工具栏通常位于菜单栏的下方,上面存放着一些小按钮,如下图所示. 以下所有功能都是直接通过代码实现,而不是在设计模式下ui界面通过拖拽实现.当然,它是可以用拖拽实现的. 引入图片资源图片资源 ...
react实现简易画板程序
react实现简易画板程序文章同时发布于:https://pengfeixc.com/blog/60d073bce97367196dce3efc. 在这之前,我写过一个vue版本的画板程序.最近因为 ...
Java图形化设计简易画板
简易画板 UI界面设置监听器类图形保存 github源代码下载: 画图工具源代码. UI界面设置根据我们想实现的画板要求,可以分步骤进行解决.在创建画板之前,首先创建窗体框架,利用java提供的 ...
java 2d划线刷子_简易画板的JAVA实现
要实现一个画图板,首先我们要掌握的是图形界面开发和事件监听机制.在Java中,图形界面开发有三套组件: 1.AWT组件:这是JDK1.0推出的图形组件类,位于java.awt这个包下.AWT组件被称为 ...
java画板铅笔_简易画板的JAVA实现
要实现一个画图板,首先我们要掌握的是图形界面开发和事件监听机制.在Java中,图形界面开发有三套组件: 1.AWT组件:这是JDK1.0推出的图形组件类,位于java.awt这个包下.AWT组件被称为 ...
Android 简易画板
用到的方法画布Canvas 画笔Paint 路径Path 文件 File 位图 Bitmap 菜单 menu 创建一个Android项目,实现手绘功能的简易画板,并可以储存. activity_ma ...

JavaScript 简易画板

JavaScript 简易画板相关推荐

最新文章

热门文章