在上次的基础上，加了一些代码，手机端可操作

访问网址：https://chandler712.github.io/Item/

  1. <!-- 简单版画板 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>简单版画板</title>
  8.     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  9.  
  10.     <style>
  11.         body,div,canvas,h5,input,ul,li,p,button{
  12.             margin: 0px;
  13.             padding: 0px;
  14.             position: relative;
  15.  
  16.         }
  17.         #mycanvas{
  18.  
  19.            margin: 5px;
  20.        }
  21.         #content{
  22.             margin: 5px auto;
  23.             width: 700px;
  24.             height: 510px;
  25.             border: 1px solid gray;
  26.  
  27.         }
  28.         #canvas_selector{
  29.             position: absolute;
  30.             margin-left: 505px;
  31.             margin-top: -512px;
  32.  
  33.             height: 500px;
  34.             width: 190px;
  35.             border:1px solid black;
  36.         }
  37.         .title{
  38.             text-align: center;
  39.             margin-bottom: 10px;
  40.         }
  41.  
  42.         ul li{
  43.  
  44.             list-style-type: none;
  45.             margin: 10px 30px 10px 20px;
  46.             display: block;
  47.             float: left;
  48.             width: 40px;
  49.             height: 20px;
  50.             background:greenyellow;
  51.             cursor: pointer;
  52.             border: 1px solid gray;
  53.         }
  54.  
  55.         #canvas_color,#canvas_brush,#canvas_control,#canvasImage{
  56.  
  57.             margin:50px 0 50px 0;
  58.         }
  59.  
  60.         #canvas_brush{
  61.  
  62.             height: 80px;
  63.             margin:10px 10px 0px 20px;
  64.  
  65.             background:greenyellow;
  66.             text-align:center;
  67.  
  68.         }
  69.         #lineT{
  70.             width: 150px;
  71.             height: 30px;
  72.             background:bisque;
  73.         }
  74.         #canvas_control{
  75.             margin:10px 10px 20px 30px;
  76.             text-align:center;
  77.         }
  78.  
  79.         #canvasImage{
  80.             text-align: center;
  81.  
  82.         }
  83.         #imgDiv{
  84.             margin: 0 auto;
  85.         }
  86.         #line{
  87.             width: 40px;
  88.             height: 20px;
  89.             cursor: pointer;
  90.         }
  91.     </style>
  92. </head>
  93. <body>
  94.     <div id="content">
  95.         <canvas id="mycanvas" width="500" height="500" style="border: 1px solid red;"></canvas>
  96.         <div id="canvas_selector">
  97.  
  98.             <div id="canvas_color">
  99.  
  100.                 <h5 class="title">颜色<input type="color" name="color" id="changeColor" /></h5>
  101.             </div>
  102.             <div id="canvas_brush">
  103.                 <h5 class="title">画笔大小</h5>
  104.                 <input type="range" id="lineT" min="1" max="100" value="2">
  105.             </div>
  106.             <div id="canvas_control">
  107.                 <h5 class="title">操作</h5>
  108.                 <span><button style="background:greenyellow" id="prev">上一步</button></span>
  109.  
  110.                 <span><button style="background:greenyellow" id="cloth">橡皮擦</button></span>
  111.                 <span><button style="background:#ffc200" id="clear">清除</button></span>
  112.             </div>
  113.             <div id="canvasImage">
  114.                 <button id="createImg">生成图像</button>
  115.             </div>
  116.         </div>
  117.  
  118.     </div>
  119.     <div id="imgDiv"></div>
  120.  
  121. </body>
  122. </html>
  123. <script>
  124.     var canvas=document.getElementById("mycanvas");
  125.     var ctx=canvas.getContext("2d");//创建画布对象
  126.     var bool=false;
  127.     var left=$("#mycanvas").offset().left;//获取画布的left值
  128.     console.log("left",left);
  129.     var top=$("#mycanvas").offset().top;//获取画布的top值
  130.     console.log("top",top);
  131.     var canvasW=$("#mycanvas").width();//获取画布的宽度
  132.     console.log("canvasW",canvasW);
  133.     var canvasH=$("#mycanvas").height();//获取画布的高度
  134.     console.log("canvasH",canvasH);
  135.     var img = []; //用于存放画布图片截图的数组
  136.     var imgDiv=document.getElementById("imgDiv");
  137.     var content=document.getElementById("content")
  138.  
  139.     var color="#000";
  140.  
  141.     ctx.lineCap="round";// 设置线条的结束端点样式
  142.     ctx.lineJion="round";//设置两条线相交时，所创建的拐角类型  
  143.  
  144.     //鼠标点击设置画布起点
  145.      $("#mycanvas").mousedown(function(e){
  146.         bool=true;
  147.         console.log("mousedown",bool);
  148.         ctx.beginPath();//起始/重置一条路径
  149.         ctx.moveTo(e.clientX-left,e.clientY-top); //把路径移动到画布中的指定点，不创建线条
  150.         var pic=ctx.getImageData(0,0,canvasW,canvasH);//获取当前画布的图像
  151.         img.push(pic);//将当前图像存入数组
  152.     });
  153.     //当bool=ture时鼠标移动画线
  154.      $("#mycanvas").mousemove(function(e){
  155.        console.log("mousemove",bool);
  156.         if(bool){ //通过bool值控制画线的连续性,如果bool=true,画线
  157.             console.log("if(bool)",bool);
  158.             ctx.lineTo(e.clientX-left,e.clientY-10);//添加一个新点，在画布中创建从该点到最后指定点的线条
  159.             ctx.stroke();//画线
  160.         }
  161.     });
  162.     //鼠标移出画布或者抬起时，退出当前画线，并新建画线，实现画线断续
  163.      $("#mycanvas").mouseout(function(e){
  164.         ctx.closePath();//当鼠标移出画布区域时,创建从当前点回到起始点的路径
  165.         bool=false;
  166.         console.log("mouseout",bool);
  167.     });
  168.     $("#mycanvas").mouseup(function(e){
  169.         ctx.closePath();//当鼠标抬起时,创建从当前点回到起始点的路径
  170.         bool=false;
  171.         console.log("mouseup",bool);
  172.     }); 
  173.  
  174.     //清除画布
  175.     $("#clear").click(function(){
  176.         //alert("Are you sure clear the canvas?");
  177.         ctx.clearRect(0,0,canvasW, canvasH);//创建矩形清空
  178.     });
  179.     //擦除画布
  180.     $("#cloth").click(function(){
  181.         ctx.strokeStyle="#fff";//利用画线为白色实现橡皮擦功能
  182.     });
  183.     //上一步
  184.     $("#prev").click(function(){
  185.         if(img.length>=0){
  186.             console.log("img.length",img.length);
  187.             var newImgLength=img.length;
  188.             console.log("newImgLength",newImgLength);
  189.             ctx.putImageData(img.pop(),0,0);
  190.  
  191.         }
  192.     });
  193.     //改变颜色
  194.     $("#changeColor").change(function(){
  195.         ctx.strokeStyle=this.value;//改变颜色
  196.     });
  197.     //改变画笔大小
  198.     $("#lineT").change(function(){
  199.         ctx.lineWidth=this.value;
  200.     });
  201.  
  202.     //生成图片
  203.     $("#createImg").click(function(){
  204.         var url=canvas.toDataURL('image/png');
  205.         var newImg=new Image();//创建一个Image对象
  206.         newImg.src=url;
  207.         imgDiv.appendChild(newImg);
  208.         imgDiv.style.width="500px";
  209.         imgDiv.style.height="500px";
  210.         imgDiv.style.background="#ccc";
  211.  
  212.     });
  213.  
  214.  //手机端功能实现
  215.     //鼠标点击设置画布起点
  216.     canvas.ontouchstart=function(a){
  217.         bool=true;
  218.         var x=a.touches[0].clientX;
  219.         var y=a.touches[0].clientY;
  220.         console.log(x,y);
  221.         ctx.beginPath();//起始/重置一条路径
  222.         ctx.moveTo(x,y);
  223.         var pic=ctx.getImageData(0,0,canvasW,canvasH);//获取当前画布的图像
  224.         img.push(pic);//将当前图像存入数组
  225.     };
  226.     canvas.ontouchmove=function(a){
  227.        console.log("move",bool);
  228.         var x=a.touches[0].clientX;
  229.         var y=a.touches[0].clientY;
  230.         if(bool){ //通过bool值控制画线的连续性,如果bool=true,画线
  231.             console.log("if(bool2)",bool);
  232.  
  233.             ctx.lineTo(x-left,y);//添加一个新点，在画布中创建从该点到最后指定点的线条
  234.             ctx.stroke();//画线
  235.  
  236.         }
  237.     };
  238.  
  239. </script>

　　

canvas 实现简单的画板功能添加手机端效果 1.01的更多相关文章

  1. canvas 实现简单的画板功能 1.0

    canvas 实现自由画线,变换颜色.画笔大小,撤销上一步等简单功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. kbmmw 的远程桌面功能2-android手机端

    前面讲了PC 端的远程操作,今天讲一下如何用手机控制远程桌面(真的能操作的很爽吗?), 要使手机可以远程控制,首先在在kbmmwconfig.inc 文件里面加入FMX 支持 {$DEFINE KBM ...

  3. 利用canvas写一个验证码小功能

    刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> ...

  4. java 工作流项目源码 SSM 框架 Activiti-master springmvc 有手机端功能

    即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...

  5. JGUI源码：Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  6. 手机端扫描证件识别SDK

    手机端扫描证件识别SDK 一.手机端扫描证件识别SDK应用背景 这些年,随着移动互联网的的发展,越来越多的公司都推出了自己的移动APP,这些APP多数都涉及到个人身份证信息的输入认证(即实名认证),如 ...

  7. 【分享】用Canvas实现画板功能

    前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...

  8. iOS实现白板、画板功能，有趣的涂鸦工具，已封装，简单快捷使用

    一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式].  三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...

  9. ASP.NET MVC 学习4、Controller中添加SearchIndex页面，实现简单的查询功能

    参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...

随机推荐

  1. Flink Data transformation(转换)

    Flink Data transformation 算子学习 1.Source:数据源,Flink在流处理和批处理上的source大概有4类: 基于本地集合的source.基于文件的source.基于 ...

  2. windows安装trojan记录

    1.trojan 客户端安装教程 https://v2raytech.com/trojan-clients/ 2.chrome安装插件(crx文件)教程 https://www.jianshu.com ...

  3. IDEA常用设置及推荐插件

    IDEA常用设置及推荐插件 本文主要记录IDEA的一些常用设置,IDEA与Eclipse的常用快捷键对比及推荐一些好用的插件. 基本设置 设置界面风格及修改外部UI尺寸大小 打开IDEA时设置不重新打 ...

  4. Python：MySQL拒绝从远程访问的解决方法

    MySQL连接数据库 #!/usr/bin/python # -*- coding: UTF-8 -*- import pymysql # 打开数据库连接 db = pymysql.connect(& ...

  5. win10画板超实用的快捷键

    win10画板超实用的快捷键链接: Windows 7 画图中的快捷键 Windows中画图的快捷键 其中有windows默认的快捷键,关于画图工具加入到快捷工具也有详细的介绍.

  6. Why TypeScript？

    本文经作者授权,翻译总结自 TypeScript Team 的成员 orta 的个人博客 <Understanding TypeScript's Popularity>. 原作者: ort ...

  7. WebService学习总结（二）--使用JDK开发WebService

    一.WebService的开发方法 使用java的WebService时可以使用一下两种开发手段 使用jdk开发(1.6及以上版本) 使用CXF框架开发(工作中) 二.使用JDK开发WebServic ...

  8. hibernate01

    什么是hibernate ORM框架/持久层框架 jdbc的一个框架 object reference mapping 通过管理对象来改变数据库中的数据 通过管理对象来操作数据库 hibernate的 ...

  9. Python常见问题 - python3 使用requests发送HTTPS请求报certificate verify failed 错误

    当你使用 requests 发送HTTPS请求时 requests.get(url, parmas=parmas, headers=header, cookies=cookie) 出现了以下错误 HT ...

  10. 判断页面是在pc端还是移动端打开不同的页面

    在pc端页面上的判断 var mobileAgent = new Array("iphone", "ipod", "ipad", " ...