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编译器 ...
随机推荐
- jconsole工具检测堆内存变化的使用
jconsole将Java写的程序检测. 从Java 5开始 引入了 JConsole.JConsole 是一个内置 Java 性能分析器,可以从命令行或在 GUI shell 中运行.您可以轻松地使 ...
- oracle：对Index重建、分析
对index进行分析,index_stats 表很有用.下面例子就结合index相关操作及 index_stats 的使用,对index进行分析. SQL> select count(*) fr ...
- sql注入原理与实践
转自:http://blog.csdn.net/stilling2006/article/details/8526458 1.1.1 摘要 日前,国内最大的程序员社区CSDN网站的用户数据库被黑客公开 ...
- 书写优雅的shell脚本（插曲）- ed编辑器
今天发现了一个灰常好用的unix/linux文本行编辑器:ed,对于进行面向行的文本编辑工作她真是太棒了,比vi操作简单.方便.功能强大.感兴趣的同仁可以尝试一下!
- AM335x Android eMMC mkmmc-android.sh hacking
# AM335x Android eMMC mkmmc-android.sh hacking # # . 有空解读一下android的分区文件. # . 代码来源:https://github.com ...
- CoderForces343D：Water Tree（dfs序+线段树&&特殊处理）
Mad scientist Mike has constructed a rooted tree, which consists of n vertices. Each vertex is a res ...
- sizeof（）解析（原）
(一)基本概念 sizeof操作符以字节形式给出了其操作数的存储大小.操作数可以是一个表达式或括在括号内的类型名.操作数的存储大小由操作数的类型决定. (二)使用方法 1.用于数据类型 ...
- 实现列表两端完全对其text-aligh:justify 和display：inline-block
dispaly:inline-block 对于块级元素,在IE8-下是不兼容的,所以一般不要用在这些元素上,可以用在inline元素上:span text-align:justify实现子元素完全对齐 ...
- ubuntu的NAT方式上网配置
vm菜单栏虚拟机--->设置---->网络适配器---->勾选NAT方式 vi /etc/network/interfaces修改配置文件如下: auto loiface lo in ...
- /proc/interrupts 和 /proc/stat 查看中断的情况 （转载）
转自:http://blog.csdn.net/richardysteven/article/details/6064717 在/proc文件系统下,又两个文件提供了中断的信息. /proc/inte ...