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 }