<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo02 pc端米字格画布</title> <link rel="stylesheet" href="css/canvas.css"> <script src="scripts/jquery-1.7.1.min.js"></script> <style> </style> </head> <body> <canvas id="canvas">您的浏览器不支持canvas</canvas> <div id="controller"><div class="op_btn" id="clear_btn"> 清除</div></div> <script src="scripts/canvas.js"></script> </body> </html>
1 var canvasWidth = 800; 2 var canvasHeight =canvasWidth; 3 4 var isMouseDown = false; 5 var lastLoc ; 6 // var lastLoc = {x:0,y:0}; 7 var curTimestamp; 8 var lastTimestamp = 0; 9 var lineWidth; 10 11 var canvas = document.getElementById('canvas'); 12 var context = canvas.getContext('2d'); 13 14 canvas.width = canvasWidth; 15 canvas.height = canvasHeight; 16 drawGrid(); 17 $('#clear_btn').click(function(){ 18 context.clearRect(0,0,canvasWidth,canvasHeight); 19 drawGrid(); 20 }) 21 canvas.onmousedown = function(e){ 22 e.preventDefault(); 23 isMouseDown = true; 24 // console.log("mouse down!"); 25 lastLoc = windowToCanvas(e.clientX,e.clientY); 26 lastTimestamp = new Date().getTime(); 27 // alert(loc.x+","+loc.y); 28 29 } 30 canvas.onmouseup = function(e){ 31 e.preventDefault(); 32 isMouseDown = false; 33 // console.log("mouse up~~~"); 34 } 35 canvas.onmouseout = function(e){ 36 e.preventDefault(); 37 isMouseDown = false; 38 // console.log("mouse out~~"); 39 } 40 41 canvas.onmousemove = function(e){ 42 e.preventDefault(); 43 // isMouseDown = true; 44 if (isMouseDown) { 45 // console.log("mouse move"); 46 var curLoc = windowToCanvas(e.clientX,e.clientY); 47 var s = calcDistance(curLoc , lastLoc); 48 var t = curTimestamp - lastTimestamp; 49 context.beginPath(); 50 context.moveTo(lastLoc.x , lastLoc.y); 51 context.lineTo( curLoc.x , curLoc.y); 52 53 context.strokeStyle = 'black'; 54 context.lineWidth = 20; 55 context.lineCap="round" 56 context.lineJoin = "round" 57 58 context.stroke(); 59 60 lastLoc = curLoc; 61 curTimestamp = lastTimestamp; 62 lastLineWidth = lineWidth; 63 }; 64 } 65 var maxLineWidth = 30; 66 var minLineWidth = 1 ; 67 var maxStrokeV = 10; 68 var minStrokeV = 0.1; 69 function calcLineWidth(t,s){ 70 var v = s/t; 71 var resultLineWidth; 72 73 if ( v <= minStrokeV) 74 resultLineWidth = maxLineWidth; 75 else if( v >= maxStrokeV) 76 resultLineWidth = minLineWidth; 77 else 78 resultLineWidth = maxLineWidth - (v-minStrokeV )/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth) 79 if (lastLineWidth == -1) { 80 return resultLineWidth; 81 }; 82 83 return resultLineWidth*2/3 + resultLineWidth*1/3; 84 } 85 function calcDistance(loc1 , loc2){ 86 return Math.sqrt((loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y)); 87 } 88 function windowToCanvas(x,y){ 89 var bbox = canvas.getBoundingClientRect(); 90 return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)}; 91 } 92 93 function drawGrid(){ 94 context.save(); 95 context.strokeStyle = "rgb(230,11,9)"; 96 97 context.beginPath(); 98 context.moveTo(3,3); 99 context.lineTo(canvasWidth - 3 , 3 ); 100 context.lineTo(canvasWidth - 3 , canvasHeight - 3 ); 101 context.lineTo(3 , canvasHeight - 3 ); 102 context.closePath(); 103 104 context.lineWidth = 6; 105 context.stroke(); 106 107 context.beginPath(); 108 context.moveTo(0,0); 109 context.lineTo(canvasWidth,canvasHeight); 110 111 context.moveTo(canvasWidth,0); 112 context.lineTo(0,canvasHeight); 113 114 context.moveTo(canvasWidth/2,0); 115 context.lineTo(canvasWidth/2,canvasHeight); 116 117 context.moveTo(0,canvasHeight/2); 118 context.lineTo(canvasWidth,canvasHeight/2); 119 120 context.lineWidth = 1; 121 context.stroke(); 122 context.restore(); 123 }
