1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.      <title></title>
  6.      <link href="css/demo1.css" rel="stylesheet" />
  7.      <script src="js/jquery-1.10.2.min.js"></script>
  8.      <script src="js/demo1.js"></script>
  9.  </head>
  10.  <body>
  11.      <canvas id="canvas"></canvas>
  12.      <div id="controller">
  13.          <div id="dclear"><a href="javascript:;" id="btnclear">清除</a></div>
  14.          <div id="dcolors">
  15.              <div class="dcolor dblack" data-color="black"></div>
  16.              <div class="dcolor dred" data-color="red" ></div>
  17.              <div class="dcolor dgreen" data-color="green"></div>
  18.              <div class="dcolor dblue" data-color="blue"></div>
  19.              <div class="dcolor dpink" data-color="pink" ></div>
  20.          </div>
  21.      </div>
  22.  </body>
  23.  </html>
  1.  *{
  2.      padding:0px;
  3.      margin:0px;
  4.  }
  5.  #canvas{
  6.      margin:0 auto;
  7.      display:block;
  8.  }
  9.  #controller{
  10.      margin:0 auto;
  11.      width:400px;
  12.      height:400px;
  13.      margin-top:10px;
  14.  }
  15.  #dclear{
  16.      float:right;
  17.  }
  18.  .dcolor{
  19.      float:left;
  20.      width:40px;
  21.      height:40px;
  22.      margin-right:5px;
  23.  }
  24.  .dblack{
  25.      background-color:black;
  26.  }
  27.  .dred{
  28.      background-color:red;
  29.  }
  30.  .dgreen{
  31.      background-color:green;
  32.  }
  33.  .dblue{
  34.      background-color:blue;
  35.  }
  36.  .dpink{
  37.      background-color:pink;
  38.  }
  39.  .sel{
  40.      border:solid 4px #b312f3;
  41.  }
  1.  /// <reference path="jquery-1.10.2.min.js" />
  2.  
  3.  var canvasWidth, canvasHight, canvas, context;
  4.  var isMouseDown = false;
  5.  var LastLoc = { x: 0, y: 0 };
  6.  var scolor = "black";
  7.  function windowToCanvas(x, y)//x,,y为距离屏幕的距离
  8.  {
  9.      var bbox = canvas.getBoundingClientRect();//canvas距离屏幕的距离
  10.      return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };//获取距离canvas的距离
  11.  }
  12.  onload = function () {
  13.      canvasWidth = 400;
  14.      canvasHight = 400;
  15.      canvas = document.getElementById("canvas");
  16.      context = canvas.getContext("2d");
  17.      drawGrid();
  18.  
  19.      canvas.onmousedown = function (e) {//鼠标放下
  20.          e.preventDefault();//取消事件的默认动作
  21.          isMouseDown = true;
  22.          LastLoc = windowToCanvas(e.clientX, e.clientY);
  23.      }
  24.  
  25.      canvas.onmouseup = function (e) {//鼠标按起
  26.          e.preventDefault();
  27.          isMouseDown = false;
  28.      }
  29.  
  30.      canvas.onmouseout = function (e) {//出了画布
  31.          e.preventDefault();
  32.          isMouseDown = false;
  33.      }
  34.  
  35.      canvas.onmousemove = function (e) {//鼠标移动
  36.          e.preventDefault();
  37.          if (isMouseDown) {
  38.              var curloc = windowToCanvas(e.clientX, e.clientY);
  39.              context.beginPath();
  40.              context.moveTo(LastLoc.x, LastLoc.y);
  41.              context.lineTo(curloc.x, curloc.y);
  42.              context.strokeStyle = scolor;
  43.              context.lineWidth = 20;
  44.              context.lineCap = "round";//帽子
  45.              context.lineJoin = "round";
  46.              context.stroke();
  47.              LastLoc = curloc;
  48.          }
  49.      }
  50.  
  51.      $("#btnclear").click(function () {
  52.          context.clearRect(0, 0, canvasWidth, canvasHight);
  53.          drawGrid();
  54.      });
  55.      $(".dcolor").click(function () {
  56.          $("this").addClass("sel").siblings().removeClass("sel");
  57.          scolor = $(this).attr("data-color");
  58.      });
  59.  }
  60.  function drawGrid() {
  61.      canvas.width = canvasWidth;
  62.      canvas.height = canvasHight;
  63.      context.strokeStyle = "#f00";
  64.      context.beginPath();
  65.      context.moveTo(3, 3);
  66.      context.lineTo(canvasWidth - 3, 3);
  67.      context.lineTo(canvasWidth - 3, canvasHight - 3);
  68.      context.lineTo(3, canvasWidth - 3);
  69.      context.closePath();
  70.      context.lineWidth = 6;//线的粗细
  71.      context.stroke();
  72.  
  73.      context.beginPath();
  74.      context.moveTo(0, 0);
  75.      context.lineTo(canvasWidth, canvasHight);
  76.  
  77.      context.moveTo(canvasWidth, 0);
  78.      context.lineTo(0, canvasHight);
  79.  
  80.      context.moveTo(canvasWidth / 2, 0);
  81.      context.lineTo(canvasWidth / 2, canvasHight);
  82.  
  83.      context.moveTo(0, canvasHight / 2);
  84.      context.lineTo(canvasWidth, canvasHight / 2);
  85.      context.lineWidth = 1;
  86.      context.stroke();
  87.  }

画布canvas签名的更多相关文章

  1. PHP《将画布(canvas)图像保存成本地图片的方法》

    用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...

  2. HTML 5 画布(canvas)

    canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力. canvas 是一个矩形区域,可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的 ...

  3. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  4. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  5. Tkinter画布-Canvas

    Python - Tkinter画布-Canvas: Canvas是一个长方形的面积,图画或其他复杂的布局.可以放置在画布上的图形,文字,部件,或是帧 Canvas是一个长方形的面积,图画或其他复杂的 ...

  6. 转载：将画布(canvas)图像保存成本地图片的方法

    之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...

  7. 面向画布(Canvas)的JavaScript库

    面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择   学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...

  8. 学习前端第二天心得体会（初步了解HTML5的部分API以及画布Canvas）

    一.HTML5部分API 1.选择器querySelector和querySelectorAll 1.1.querySelector:返回文档中匹配指定的CSS选择器的第一元素.  document. ...

  9. java 图形化小工具Abstract Window Toolit ：画笔Graphics，画布Canvas()，弹球小游戏

    画笔Graphics Java中提供了Graphics类,他是一个抽象的画笔,可以在Canvas组件(画布)上绘制丰富多彩的几何图和位图. Graphics常用的画图方法如下: drawLine(): ...

随机推荐

  1. mysql远程访问被禁止

    远程连接Mysql服务器的数据库,错误代码是1130,ERROR 1130: Host xxx.xxx.xxx.xxx  is not allowed to connect to this MySQL ...

  2. vm安装centos后unknown host问题和yum install安装不成功问题

    网上差了很多说要在vi /etc/sysconfig/network新增GATEWAY=192.168.0.1 还有vi /etc/sysconfig/network-scripts/ifcfg-et ...

  3. springboot添加第三方的jar或本地jar

    原文链接:https://www.cnblogs.com/fengli9998/p/8044923.html 由对接支付引入第三方的jar时冒出的问题,如何在springboot项目中来引入第三方的j ...

  4. P2446 [SDOI2010]大陆争霸

    \(\color{#0066ff}{ 题目描述 }\) 幻想历8012年5月12日深夜,斯普林·布拉泽降下神谕:"Trust me, earn eternal life."克里斯军 ...

  5. FPGA实战操作(1) -- SDRAM（操作说明）

    SDRAM是做嵌入式系统中,常用是的缓存数据的器件.基本概念如下(注意区分几个主要常见存储器之间的差异): SDRAM(Synchronous Dynamic Random Access Memory ...

  6. Folyd算法（转+适合问题 ）

    Folyd算法适合多源最短路的求解问题(时间复杂度(O(n^3)),单源无负权值的问题适合Dijstra(O(n^2)) 小Hi强行装作没听到,继续说道:"这个算法的核心之处在于数学归纳法- ...

  7. 使用YARN修改中国镜像

    官网地址 下载安装 https://yarnpkg.com/zh-Hans/   查看仓库使用地址 yarn config set registry 设置为淘宝镜像 yarn config set r ...

  8. asp.net core 标签验证函数功能

    public class AuthFilter : Attribute, IActionFilter { public void OnActionExecuted(ActionExecutedCont ...

  9. spring boot——关于一个Mysql主键的问题

    问题是这样的: 我现在有一个被@Entity标记的类TimeLine,其中id为主键. TimeLineController中有一个接收post请求的add()方法,这个方法会接受客户端传来的一个表单 ...

  10. elastic search语句

    基本匹配: { "query":{ "match":{ "title" : "quick" } } } ES语法结构: ...