<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. HDU3613 Best Reward —— Manacher算法 / 扩展KMP + 枚举

    题目链接:https://vjudge.net/problem/HDU-3613 Best Reward Time Limit: 2000/1000 MS (Java/Others)    Memor ...

  2. Pyhton：List build-in function

    列表是Python中的可迭代对象之一,在讲列表的内建函数之前我们可以自己在IDE上看看都有那些内建函数,我们可以在pycharm中使用代码及其运行结果如下: print(dir(list)) ['__ ...

  3. html5--6-5 CSS选择器2

    html5--6-5 CSS选择器2 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...

  4. SILVERLIGHT实现对HTML DOM的访问

    实现对HTML DOM的访问.Silverlight 2在命名空间System.Windows.Browser下内置了很多对于HTML DOM访问和操作的支持,我们最常用的一个对象是HtmlEleme ...

  5. 第一次通过AVD Manager创建了一个虚拟设备，但是在Android Studio运行程序时却无设备可选

    第一次通过AVD Manager创建了一个虚拟设备,但是在Android Studio运行程序时却无设备可选 原因是adb.exe未运行起来 至于adb.exe未正常运行起来的原因多半是5037端口被 ...

  6. 创建一个Windows Service 程序

    1.新建Windows项目,选择"Windows服务"类型的项目. 2.在生成的Service1.cs中代码中写你需要的代码,如下: using System; using Sys ...

  7. 并不对劲的bzoj5475:loj2983:p5206:[wc2019]数树

    题目大意 task0:有两棵\(n\)(n\leq10^5)个点的树\(T1,T2\),每个点的点权可以是一个在\([1,y]\)里的数,如果两个点既在\(T1\)中有直接连边,又在\(T2\)中有直 ...

  8. [Selenium] 如何使用Chrome Options 定制测试Chrome 浏览器的特定属性 (类似FirefoxProfiles)

    Chrome Options 类似于FirefoxProfiles,用于定制待测试的Chrome 浏览器的特定属性 1)如果希望测试某个浏览器插件,可通过addExtensions方式提前加载以.cr ...

  9. flask logging 最佳实践

    flask项目中, 你可以使用python 的 logging模块实现记录日志. 也可以使用 flask 基于logging模块封装过的app.logger实现. 直接上代码 config.py im ...

  10. Linux Bash 提示符的一些骚年操作

    当你在 Linux 环境下打开一个 Shell 终端时,会看到命令行中出现了类似下面的一个 Bash 提示符: 百牛信息技术bainiu.ltd整理发布于博客园[user@$host ~]$1[use ...