<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. (C/C++)register关键字

    register:这个关键字的作用是请求编译器尽可能的将变量存在CPU内部寄存器中,而不是通过内存寻址访问,以提高效率. 注意是尽可能,不是绝对.一个CPU 的寄存器也就那么几个或几十个,你要是定义了 ...

  2. Could not load file or assembly 'System.Web.Http

    使用FusLogVw https://stackoverflow.com/questions/4469929/could-not-load-file-or-assembly-or-one-of-its ...

  3. jdk8新特性Stream

    Stream的方法描述与实例 1,filter  过滤 Person p1 = new Person(); p1.setName("P1"); p1.setAge(10); Per ...

  4. 用JS或jQuery访问页面内的iframe

    用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...

  5. I.MX6 system.img unpack repack

    /************************************************************************* * I.MX6 system.img unpack ...

  6. SPOJ:OR(位运算&数学期望)

    Given an array of N integers A1, A2, A3…AN. If you randomly choose two indexes i ,j such that 1 ≤ i ...

  7. [Selenium] WebDriver 操作文件系统

    1)屏幕截图 接口函数是 TakesScreenshot 示例: import java.io.File; import org.apache.commons.io.FileUtils; public ...

  8. bzoj2878 [Noi2012]迷失游乐园——概率期望DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2878 这个博客写得很好:https://www.cnblogs.com/qt666/p/72 ...

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

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

  10. SpringBoot启动的时候不去校验数据库连接配置是否正确

    spring boot在启动的时候只会检查你是否配置了数据库连接, 而不会检测配置的是否正确 这样会出现的问题是: 只有在你使用数据库的时候才知道配置出错, 我们希望是在程序启动的时候就进行检查, 如 ...