H5 canvas pc 端米字格写字板

<!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 }

H5 canvas pc 端米字格 写字板

H5 canvas pc 端米字格写字板