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 }