<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <link href="css/demo1.css" rel="stylesheet" />

     <script src="js/jquery-1.10.2.min.js"></script>

     <script src="js/demo1.js"></script>

 </head>

 <body>

     <canvas id="canvas"></canvas>

     <div id="controller">

         <div id="dclear"><a href="javascript:;" id="btnclear">清除</a></div>

         <div id="dcolors">

             <div class="dcolor dblack" data-color="black"></div>

             <div class="dcolor dred" data-color="red" ></div>

             <div class="dcolor dgreen" data-color="green"></div>

             <div class="dcolor dblue" data-color="blue"></div>

             <div class="dcolor dpink" data-color="pink" ></div>

         </div>

     </div>

 </body>

 </html>
 *{

     padding:0px;

     margin:0px;

 }

 #canvas{

     margin:0 auto;

     display:block;

 }

 #controller{

     margin:0 auto;

     width:400px;

     height:400px;

     margin-top:10px;

 }

 #dclear{

     float:right;

 }

 .dcolor{

     float:left;

     width:40px;

     height:40px;

     margin-right:5px;

 }

 .dblack{

     background-color:black;

 }

 .dred{

     background-color:red;

 }

 .dgreen{

     background-color:green;

 }

 .dblue{

     background-color:blue;

 }

 .dpink{

     background-color:pink;

 }

 .sel{

     border:solid 4px #b312f3;

 }
 /// <reference path="jquery-1.10.2.min.js" />

 var canvasWidth, canvasHight, canvas, context;

 var isMouseDown = false;

 var LastLoc = { x: 0, y: 0 };

 var scolor = "black";

 function windowToCanvas(x, y)//x,,y为距离屏幕的距离

 {

     var bbox = canvas.getBoundingClientRect();//canvas距离屏幕的距离

     return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };//获取距离canvas的距离

 }

 onload = function () {

     canvasWidth = 400;

     canvasHight = 400;

     canvas = document.getElementById("canvas");

     context = canvas.getContext("2d");

     drawGrid();

     canvas.onmousedown = function (e) {//鼠标放下

         e.preventDefault();//取消事件的默认动作

         isMouseDown = true;

         LastLoc = windowToCanvas(e.clientX, e.clientY);

     }

     canvas.onmouseup = function (e) {//鼠标按起

         e.preventDefault();

         isMouseDown = false;

     }

     canvas.onmouseout = function (e) {//出了画布

         e.preventDefault();

         isMouseDown = false;

     }

     canvas.onmousemove = function (e) {//鼠标移动

         e.preventDefault();

         if (isMouseDown) {

             var curloc = windowToCanvas(e.clientX, e.clientY);

             context.beginPath();

             context.moveTo(LastLoc.x, LastLoc.y);

             context.lineTo(curloc.x, curloc.y);

             context.strokeStyle = scolor;

             context.lineWidth = 20;

             context.lineCap = "round";//帽子

             context.lineJoin = "round";

             context.stroke();

             LastLoc = curloc;

         }

     }

     $("#btnclear").click(function () {

         context.clearRect(0, 0, canvasWidth, canvasHight);

         drawGrid();

     });

     $(".dcolor").click(function () {

         $("this").addClass("sel").siblings().removeClass("sel");

         scolor = $(this).attr("data-color");

     });

 }

 function drawGrid() {

     canvas.width = canvasWidth;

     canvas.height = canvasHight;

     context.strokeStyle = "#f00";

     context.beginPath();

     context.moveTo(3, 3);

     context.lineTo(canvasWidth - 3, 3);

     context.lineTo(canvasWidth - 3, canvasHight - 3);

     context.lineTo(3, canvasWidth - 3);

     context.closePath();

     context.lineWidth = 6;//线的粗细

     context.stroke();

     context.beginPath();

     context.moveTo(0, 0);

     context.lineTo(canvasWidth, canvasHight);

     context.moveTo(canvasWidth, 0);

     context.lineTo(0, canvasHight);

     context.moveTo(canvasWidth / 2, 0);

     context.lineTo(canvasWidth / 2, canvasHight);

     context.moveTo(0, canvasHight / 2);

     context.lineTo(canvasWidth, canvasHight / 2);

     context.lineWidth = 1;

     context.stroke();

 }

画布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. P4799 [CEOI2015 Day2]世界冰球锦标赛

    \(\color{#0066ff}{题目描述}\) 今年的世界冰球锦标赛在捷克举行.Bobek 已经抵达布拉格,他不是任何团队的粉丝,也没有时间观念.他只是单纯的想去看几场比赛.如果他有足够的钱,他会 ...

  2. numpy方法介绍

    三.numpy系列 1.np.maximum:(X, Y, out=None) X 与 Y 逐位比较取其大者: 最少接收两个参数 h=[[-2,2,10],[-5,-9,20]] hh=np.maxi ...

  3. 直播点赞,上升的动画-- CAKeyFrameAnimation

    // //  ViewController.m //  DMHeartFlyAnimation // //  Created by Rick on 16/3/9. //  Copyright © 20 ...

  4. ubuntu下中文乱码解决

    这个方法只对该用户有效. 方法二:修改/etc/environment,增加以下内容: LANGUAGE=”zh_CN:zh:en_US:en” LANG=zh_CN.GBK

  5. 1005 继续(3n+1)猜想（25 分）

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 进行验证的时 ...

  6. maven set MAVEN_OPTS

    http://juvenshun.iteye.com/blog/240257 https://docs.alfresco.com/5.1/tasks/alfresco-sdk-install-mave ...

  7. vue父子组件通信（prop）

    先定义子组件,注册prop接收父组件传递的值 <template> <div> <div>{{message}}(子组件)</div> </div ...

  8. hive - load CSV file NULL value 加载csv文件出现结果全是空值

    这个问题的根源是,创建表的时候没有指定列分隔符还有行分隔符. 因此修改建表语句 问题依然重现,此问题苦恼了一个下午,有一次用describe tablename 发现了问题所在,原来是一直没有删除ta ...

  9. Spring Boot 实现ErrorController接口处理404、500等错误页面

    在项目中我们遇到404找不到的错误.或者500服务器错误都需要配置相应的页面给用户一个友好的提示,而在Spring Boot中我们需要如何设置. 我们需要实现ErrorController接口,重写h ...

  10. springMVC初探视图解析器——InternalResourceViewResolver

    springmvc在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就需要通过视图解析器. springmvc里提供了多个视图解析器,InternalResourceViewResolver就 ...