<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防画图工具的更多相关文章

  1. 使用Canvas制作画图工具

      前  言 JRedu canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域,我们可以控制其每一个元素,并且canvas拥有多种的绘 ...

  2. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  3. HTML5简易在线画图工具

    继上次学习了HTML5的路径画圆做了动态时钟.异次元空间的反转做了运动的太阳系,这两天将画线.画圆.填充等知识点结合起来做了一个简易的在线画图工具: 查看DEMO:HTML5简易在线画图工具 功能包括 ...

  4. Ubuntu 16.10 安装KolourPaint 4画图工具

    KolourPaint 4画图工具简单实用,可以绘画.视频处理和图标编辑: • 绘画:绘制图表和“手绘” • 视频处理:编辑截图和照片;应用特效 • 图标编辑:绘画剪贴和标识透明化 1.在Ubuntu ...

  5. Flex 中画图工具（drawTool）失效

    做项目的时候画图工具突然失效,解决了半天都不行,最后将画图结束的函数map_drawEndHandler写在方法里面的时候,运行却能够画图了,不知道是什么原理,比较头疼,左思右想,都感觉有点怪怪的,虽 ...

  6. 推荐ubuntu下的画图工具

    今天发现ubuntu下面也有类似于windows画图的画图工具,功能也比较强大,支持各种格式的图片,也有各种工具,非常方便,安装的方法是: sudo apt-get install kolourpai ...

  7. canvas 在线画图

    canvas 在线画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. DrawTools（画图工具）原始版本

    上一篇文章一个优秀的C#开源绘图软件 DrawTools中详细的介绍了DrawTools的几种演化的较高版本的软件的特色与功能. 这篇文章,将介绍一下这款软件的成名版本, 下载地址DrawTool_O ...

  9. [转载]Eziriz .NET Reactor 4.7.0.0 官方原版+破解补丁（强大的代码保护和软件防盗版工具）

    Eziriz .NET Reactor 是一个强大的代码保护和软件防盗版工具,完全由.NET框架编写..NET Reactor支持NET平台的软件许可系统,并支持NET程序集所有语言.当.Net编译器 ...

随机推荐

  1. 使用pt-query-digest进行日志分析

    使用pt-query-digest sudo apt install percona-toolkit 也可以到官网 https://www.percona.com/downloads/percona- ...

  2. html5--6-41 CSS背景

    html5--6-41 CSS背景 实例 学习要点 掌握CSS背景属性的使用 元素的背景属性: background 简写属性,作用是将背景属性设置在一个声明中. background-attachm ...

  3. Viewpager animation duration setting

    private void animatePagerTransition(final boolean forward) { ValueAnimator animator = ValueAnimator. ...

  4. iOS 观察者模式（KVO）的简单使用

    KVO的全称是Key-Value Observing,它实现了一种机制,对所关心的属性对象添加观察者,当属性值发生变化时会得到通知,我们可以对变化做相应的处理.看过设计模式的同学应该知道,这是一种典型 ...

  5. docker安装-卸载

    docker官网正确安装-卸载 一.查看系统内核 uname -r 3.10.0-229.el7.x86_64 二.Install Docker 1.Install with yum sudo yum ...

  6. Javaweb中利用kaptcha生成验证码

    引入kaptcha-2.3-jdk15.jar包 在web.xml中进行配置 <servlet> <servlet-name>Kaptcha</servlet-name& ...

  7. vs2008工程部署不成功，可能是远程文件路径出现问题

    解决方法: 修改工程属性页的配置属性 调试中的远程可执行文件的路径 部署中的远程目录的路径

  8. 折半插入排序 之通俗易懂,图文+代码详解-java编程

    转自http://blog.csdn.net/nzfxx/article/details/51615439 1.特点及概念介绍 下面给大家讲解一下"二分法查找"这个java基础查找 ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 17. 基于Claim和Policy的授权 上

    首先补一下昨天没有讲的东西 只有管理员才能访问UserController RoleController都加上这个角色 Cliam 不是管理员角色的用户访问 cliam是name个Value值的键值对 ...

  10. 枚举与#define 宏的区别

    1),#define 宏常量是在预编译阶段进行简单替换.枚举常量则是在编译的时候确定其值.2),一般在编译器里,可以调试枚举常量,但是不能调试宏常量.3),枚举可以一次定义大量相关的常量,而#defi ...