canvas防画图工具
<style>
body {
background: black;
text-align: center;
}
#cans {
background: white;
}
</style>
<script>
window.onload=function(){
let OC=document.getElementById("cans");//获取画布
let c1=document.getElementById("c1");//获取input[type=color]
c1.onchange=function(){//当input[type=color]颜色改变时触发（用于更改画笔颜色）
ctx.beginPath();//防止之前画好的部分受后面画的影响
ctx.strokeStyle=this.value;//给画笔赋值，this.value即c1改变后的颜色值
}
let ctx=OC.getContext("2d");//创建画板
let lastX,lastY;
OC.onmousedown=function(ev){//在画布里按下鼠标
lastX=ev.offsetX;//获取鼠标位置x轴坐标
lastY=ev.offsetY;//获取鼠标位置y轴坐标
OC.onmousemove=function(ev){//在画布里按下鼠标并移动鼠标
ctx.moveTo(lastX,lastY);//最开始的起笔位置，x轴坐标，y轴坐标
ctx.lineTo(ev.offsetX,ev.offsetY);////设置终点坐标
ctx.stroke();//描边
lastX=ev.offsetX;//每次的终点坐标，即下次起笔的起点坐标（鼠标的当前位置），
lastY=ev.offsetY;//每次的终点坐标，即下次起笔的起点坐标（鼠标的当前位置）
}
document.onmouseup=function(ev){//在整个document内松开鼠标
OC.onmousemove=null;//onmousemove置空
OC.onmouseup=null;//onmouseup置空
}
}
}
</script>
<body>
<input type="color" id="c1"><br />
<canvas id="cans" height="800" width="1200">该浏览器不支持canvas元素操作,请更新浏览器</canvas>
</body>
canvas防画图工具的更多相关文章
- 使用Canvas制作画图工具
前 言 JRedu canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域,我们可以控制其每一个元素,并且canvas拥有多种的绘 ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- HTML5简易在线画图工具
继上次学习了HTML5的路径画圆做了动态时钟.异次元空间的反转做了运动的太阳系,这两天将画线.画圆.填充等知识点结合起来做了一个简易的在线画图工具: 查看DEMO:HTML5简易在线画图工具 功能包括 ...
- Ubuntu 16.10 安装KolourPaint 4画图工具
KolourPaint 4画图工具简单实用,可以绘画.视频处理和图标编辑: • 绘画:绘制图表和“手绘” • 视频处理:编辑截图和照片;应用特效 • 图标编辑:绘画剪贴和标识透明化 1.在Ubuntu ...
- Flex 中画图工具（drawTool）失效
做项目的时候画图工具突然失效,解决了半天都不行,最后将画图结束的函数map_drawEndHandler写在方法里面的时候,运行却能够画图了,不知道是什么原理,比较头疼,左思右想,都感觉有点怪怪的,虽 ...
- 推荐ubuntu下的画图工具
今天发现ubuntu下面也有类似于windows画图的画图工具,功能也比较强大,支持各种格式的图片,也有各种工具,非常方便,安装的方法是: sudo apt-get install kolourpai ...
- canvas 在线画图
canvas 在线画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- DrawTools（画图工具）原始版本
上一篇文章一个优秀的C#开源绘图软件 DrawTools中详细的介绍了DrawTools的几种演化的较高版本的软件的特色与功能. 这篇文章,将介绍一下这款软件的成名版本, 下载地址DrawTool_O ...
- [转载]Eziriz .NET Reactor 4.7.0.0 官方原版+破解补丁（强大的代码保护和软件防盗版工具）
Eziriz .NET Reactor 是一个强大的代码保护和软件防盗版工具,完全由.NET框架编写..NET Reactor支持NET平台的软件许可系统,并支持NET程序集所有语言.当.Net编译器 ...
随机推荐
- iOS——多线程编程详细解析
基本定义: 程序:由代码生成的可执行应用.(例如QQ.app) 进程:一个正在运行的程序可以看做是一个进程. (例如:正在运行的QQ 就是一个进程),进程拥有独立运行所需要的全部资源. 线程: 程序中 ...
- 深入浅出Oracle学习笔记：Buffer Cache 和Shared pool
Buffer cache 和 share pool 是sga中最重要最复杂的部分. 一.Buffer Cache 通常数据的读取.修改都是通过buffer cache 来完成的.buffer cach ...
- 最大网络流 EK 算法
网络流是什么类型的问题,看一道题目你就知道了 点击打开链接 . 默认具备图论的基本知识,网络流概念比较多,先看看书熟悉一下那些概念.比较好!一个寄出的网络最大流.EK算法写的. 这是一幅网络,求S ...
- I.MX6 AW-NB177NF p2p support
/***************************************************************************** * I.MX6 AW-NB177NF p2 ...
- 并不对劲的bzoj3994:loj2185:p3327[SDOI2015]约数个数和
题目大意 设d(x)为x的约数个数,\(t\)组询问,给定\(n,m\)(\(t,m,n\leq5*10^4\)),求$ \sum^n_{i=1}\sum^m_{j=1}d(i*j)$ 题解 假设\( ...
- BZOJ_1916_[Usaco2010 Open]冲浪_分层图+拓扑排序+DP
BZOJ_1916_[Usaco2010 Open]冲浪_分层图+拓扑排序+DP Description 受到秘鲁的马丘比丘的新式水上乐园的启发,Farmer John决定也为奶牛们建 一个水上乐园. ...
- Hibernate 4.3.7 可编程方式+注解
1.复制jar文件到lib antlr-2.7.7.jardbmysql.jardboracle.jardbsqljdbc2005.jardom4j-1.6.1.jarhibernate-common ...
- 编程 MD(d)、MT(d)编译选项的区别
转:http://blog.csdn.net/nodeathphoenix/article/details/7550546 1.各个选项代表的含义 编译选项 包含 静态链接的lib 说明 /MD _M ...
- 使用CompletableFuture+ExecutorService+Logback的多线程测试
1. 环境 Java: jdk1.8.0_144 2. 背景 Java多线程执行任务时,Logback输出的主线程和各个子线程的业务日志需要区分时,可以根据线程池和执行的线程来区分,但若要把它们联系起 ...
- linux软硬连接学习总结
创建连接实质上就是给系统中已经存在的文件指定另外一个可以访问它的名称,linux系统当中连接的创建有两种形式:硬链接(Hard Link),与符号链接(Symbloic Link)既软链接. ln命令 ...