1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo02 pc端米字格画布</title>
  6.     <link rel="stylesheet" href="css/canvas.css">
  7.     <script src="scripts/jquery-1.7.1.min.js"></script>
  8. <style>
  9.  
  10. </style>
  11. </head>
  12. <body>
  13. <canvas id="canvas">您的浏览器不支持canvas</canvas>
  14. <div id="controller"><div class="op_btn" id="clear_btn"> 清除</div></div>
  15. <script src="scripts/canvas.js"></script>
  16. </body>
  17. </html>
  1.  var canvasWidth = 800;
  2.  var canvasHeight =canvasWidth;
  3.  
  4.  var isMouseDown = false;
  5.  var lastLoc ;
  6.  // var lastLoc = {x:0,y:0};
  7.  var curTimestamp;
  8.  var lastTimestamp = 0;
  9.  var lineWidth;
  10.  
  11.  var canvas = document.getElementById('canvas');
  12.  var context = canvas.getContext('2d');
  13.  
  14.  canvas.width = canvasWidth;
  15.  canvas.height = canvasHeight;
  16.  drawGrid();
  17.  $('#clear_btn').click(function(){
  18.      context.clearRect(0,0,canvasWidth,canvasHeight);
  19.      drawGrid();
  20.  })
  21.  canvas.onmousedown = function(e){
  22.      e.preventDefault();
  23.      isMouseDown = true;
  24.      // console.log("mouse down!");
  25.      lastLoc = windowToCanvas(e.clientX,e.clientY);
  26.      lastTimestamp = new Date().getTime();
  27.      // alert(loc.x+","+loc.y);
  28.  
  29.  }
  30.  canvas.onmouseup = function(e){
  31.      e.preventDefault();
  32.      isMouseDown = false;
  33.      // console.log("mouse up~~~");
  34.  }
  35.  canvas.onmouseout = function(e){
  36.      e.preventDefault();
  37.      isMouseDown = false;
  38.      // console.log("mouse out~~");
  39.  }
  40.  
  41.  canvas.onmousemove = function(e){
  42.      e.preventDefault();
  43.      // isMouseDown = true;
  44.      if (isMouseDown) {
  45.          // console.log("mouse move");
  46.          var curLoc = windowToCanvas(e.clientX,e.clientY);
  47.          var s = calcDistance(curLoc , lastLoc);
  48.          var t = curTimestamp - lastTimestamp;
  49.          context.beginPath();
  50.          context.moveTo(lastLoc.x , lastLoc.y);
  51.          context.lineTo( curLoc.x , curLoc.y);
  52.  
  53.          context.strokeStyle = 'black';
  54.          context.lineWidth = 20;
  55.          context.lineCap="round"
  56.          context.lineJoin = "round"
  57.  
  58.          context.stroke();
  59.  
  60.          lastLoc = curLoc;
  61.          curTimestamp = lastTimestamp;
  62.          lastLineWidth = lineWidth;
  63.      };
  64.  }
  65.  var maxLineWidth = 30;
  66.  var minLineWidth = 1 ;
  67.  var maxStrokeV = 10;
  68.  var minStrokeV = 0.1;
  69.  function calcLineWidth(t,s){
  70.      var v = s/t;
  71.      var resultLineWidth;
  72.  
  73.      if ( v <= minStrokeV)
  74.          resultLineWidth = maxLineWidth;
  75.      else if( v >= maxStrokeV)
  76.          resultLineWidth = minLineWidth;
  77.      else
  78.          resultLineWidth = maxLineWidth - (v-minStrokeV )/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth)
  79.      if (lastLineWidth == -1) {
  80.          return resultLineWidth;
  81.      };
  82.  
  83.      return resultLineWidth*2/3 + resultLineWidth*1/3;
  84.  }
  85.  function calcDistance(loc1 , loc2){
  86.      return Math.sqrt((loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y));
  87.  }
  88.  function windowToCanvas(x,y){
  89.      var bbox = canvas.getBoundingClientRect();
  90.      return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};
  91.  }
  92.  
  93.  function drawGrid(){
  94.      context.save();
  95.  context.strokeStyle = "rgb(230,11,9)";
  96.  
  97.  context.beginPath();
  98.  context.moveTo(3,3);
  99.  context.lineTo(canvasWidth - 3 , 3 );
  100.  context.lineTo(canvasWidth - 3 , canvasHeight - 3 );
  101.  context.lineTo(3 , canvasHeight - 3  );
  102.  context.closePath();
  103.  
  104.  context.lineWidth = 6;
  105.  context.stroke();
  106.  
  107.  context.beginPath();
  108.  context.moveTo(0,0);
  109.  context.lineTo(canvasWidth,canvasHeight);
  110.  
  111.  context.moveTo(canvasWidth,0);
  112.  context.lineTo(0,canvasHeight);
  113.  
  114.  context.moveTo(canvasWidth/2,0);
  115.  context.lineTo(canvasWidth/2,canvasHeight);
  116.  
  117.  context.moveTo(0,canvasHeight/2);
  118.  context.lineTo(canvasWidth,canvasHeight/2);
  119.  
  120.  context.lineWidth = 1;
  121.  context.stroke();
  122.  context.restore();
  123.  }

H5 canvas pc 端米字格 写字板的更多相关文章

  1. 社交系统/社群系统“ThinkSNS+”H5及PC端终于来了！一起来“找茬”

    [什么是TS+?] ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+,简称TS+. 还记得2017年 ...

  2. 关于H5从PC端切换到移动端，屏幕显示内容由横向转为竖向的研究！

    1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行 ...

  3. 实现pc端信纸留言板

    效果如图: 我好像在哪里见过这样的形式,但却从来没有想过怎么实现,有种莫名的兴奋感.怎么控制什么时候换行,怎么控制中间的线条,这些视乎都是CSS无法实现的,我陷入了死局.寻找JS的做法,JS的挺复杂的 ...

  4. canvas做的一个写字板

    <!DOCTYPE html><html><head><title>画板实验</title> <meta charset=" ...

  5. canvas h5制作写字板

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <script type ...

  6. H5测试与PC端测试不同的点

    1.通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2.横屏竖屏相互切换,能自适应,并且布局不会乱掉: 3.为能在不同分辨率的手机上能更好的展示,建议采用响应式设计(如: ...

  7. h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）

    h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...

  8. html5之canvas画图 1.写字板功能

     写字板事例:       写字板分析:1.点击鼠标開始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):       代 ...

  9. 前端：微信支付和支付宝支付在pc端和h5页面中的应用

    1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...

随机推荐

  1. java抛出异常后，后续代码是否可继续执行

    参考:https://www.cnblogs.com/wangyingli/p/5912269.html 仅此可正常执行异常后内容 try{ throw new Exception("参数越 ...

  2. 微信公众号开发——获取access_token（PHP版）

    access_token是调用微信接口的唯一凭据,每两小时刷新一次,我们需要每两小时就获取一次access_token. <?php class TokenUtil { //获取access_t ...

  3. poj1419 求最大独立集

    题目链接:http://poj.org/problem?id=1419 题意:求最大独立集 思路: 这里有一个定理: 最大独立集=补图的最大团最大团=补图的最大独立集 所以这里我们只要求给出的图的最大 ...

  4. SSM整合（一）

    http://www.cnblogs.com/xuerong/p/6796600.html 技术点 1.基础框架-ssm (SpringMVC +Spring +MyBatis) 2.数据库MySqQ ...

  5. 在Visual studio 中解除 TFS 的账号绑定

    在Visual Studio中, 只要使用了TFS, 就会要求输入用户名密码验证 . 但是一旦点击验证对话框下部的:记住用户名密码 以后都不能再修改用户名了. 而且重装Visual Studio 听说 ...

  6. 洛谷 P3952 时间复杂度【模拟】

    把No写成NO,WA了一发-- 现在看这题也不难-- 用一个栈,记一下前面F的字母,是否合法,合法的有多长,每次入栈弹栈即可 #include<iostream> #include< ...

  7. bzoj 3052: [wc2013]糖果公园【树上带修改莫队】

    参考:http://blog.csdn.net/lych_cys/article/details/50845832 把树变成dfs括号序的形式,注意这个是不包含lca的(除非lca是两点中的一个) 然 ...

  8. 今天带来Pycharm安装详细教程

    Python环境搭建—安利Python小白的Python和Pycharm安装详细教程 人生苦短,我用Python.众所周知,Python目前越来越火,学习Python的小伙伴也越来越多.最近看到群里的 ...

  9. Luogu P1134 阶乘问题 【数学/乱搞】 By cellur925

    输入输出格式 输入格式: 仅一行包含一个正整数 NN . 输出格式: 一个整数,表示最右边的非零位的值. 输入输出样例 输入样例#1: 12 输出样例#1: 6 说明 USACO Training S ...

  10. python中threading模块中最重要的Tread类

    Tread是threading模块中的重要类之一,可以使用它来创造线程.其具体使用方法是创建一个threading.Tread对象,在它的初始化函数中将需要调用的对象作为初始化参数传入. 具体代码如下 ...