<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. ping 和 远程桌面 与防火墙的关系

    现象: 初始化服务器时,人们为了方便,常常关闭防火墙,这样做很危险.我们经常遇到问题是,防火墙一旦打开,ping和远程桌面就会有问题. 有时ping不通,但能远程:但有时ping通,又远程不了:有时都 ...

  2. dede摘要长度,dedecms摘要限制,dedecms摘要字数

    dede摘要长度,dedecms摘要限制,dedecms摘要字数 如果可以有效控制文章摘要的字数,那么就可以使得页面布局很灵活. 在Dedecms中,在列表页调用文章摘要的方法主要有: 1:[fiel ...

  3. Silverlight实用窍门系列：1.Silverlight读取外部XML加载配置---（使用WebClient读取XAP包同目录下的XML文件））【附带实例源码】

    使用WebClient读取XAP包同目录下的XML文件 我们想要读取XAP包下面的XML文件,需要将此XML文件放在加载XAP包的网页的目录中去,然后使用URI方式读取此URL方式下的XML文件. 首 ...

  4. UVA-11082 Matrix Decompressing(有上下界的最大流)

    题目链接: Matrix Decompressing 题意: 给一个矩阵的每行和每列的和,(给的是前i行或者列的和); 矩阵中每个元素的值在1到20之间,找出这样的一个矩阵: 思路: 把它转化成一个二 ...

  5. 【BZOJ 2818】 GCD

    [题目链接] 点击打开链接 [算法] 线性筛出不大于N的所有素数,枚举gcd(x,y)(设为p),问题转化为求(x,y)=p的个数          设x=x'p, y=y'p,那么有(x,y)=1且 ...

  6. 重新安装VMware10提示"The Msi '' Failed"问题解决方案

    想把虚拟机软件升级以下,没想到卸载的时候不干净,再安装的时候总提示让我先卸载旧版本但实际上旧版本已经卸载过了,这里又没法再卸载一次,所以就提示”The MSI '' failed“ 显然,安装程序还是 ...

  7. 6-12 SVM小结

    介绍了SVM的概念以及如何利用SVM进行一个身高体重的训练和预测.如果类别比较简单的话,那么在二维空间上它有可能就是一条直线.如果类别比较复杂,那么投影到高维空间上它就是一个超平面.所以SVM的本质它 ...

  8. B. Blown Garland

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  9. Not enough free disk space on disk '/boot'（转载）

    转自:http://m.oschina.net/blog/277224 # 解决 出现此情况是因为你的boot分区是单独分区的,像我只给了100M,以前装ubuntu时没有出现,所以当出现这个提示时, ...

  10. poj 3648 Wedding【2-SAT+tarjan+拓扑】

    看错题*n,注意是输出新娘这边的-- 按2-SAT规则连互斥的边,然后注意连一条(1,1+n)表示新娘必选 然后输出color[belong[i]]==color[belong[1+n(新娘)]]的点 ...