画布canvas签名

 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 }