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>

 var canvasWidth = 800;

 var canvasHeight =canvasWidth;

 var isMouseDown = false;

 var lastLoc ;

 // var lastLoc = {x:0,y:0};

 var curTimestamp;

 var lastTimestamp = 0;

 var lineWidth;

 var canvas = document.getElementById('canvas');

 var context = canvas.getContext('2d');

 canvas.width = canvasWidth;

 canvas.height = canvasHeight;

 drawGrid();

 $('#clear_btn').click(function(){

     context.clearRect(0,0,canvasWidth,canvasHeight);

     drawGrid();

 })

 canvas.onmousedown = function(e){

     e.preventDefault();

     isMouseDown = true;

     // console.log("mouse down!");

     lastLoc = windowToCanvas(e.clientX,e.clientY);

     lastTimestamp = new Date().getTime();

     // alert(loc.x+","+loc.y);

 }

 canvas.onmouseup = function(e){

     e.preventDefault();

     isMouseDown = false;

     // console.log("mouse up~~~");

 }

 canvas.onmouseout = function(e){

     e.preventDefault();

     isMouseDown = false;

     // console.log("mouse out~~");

 }

 canvas.onmousemove = function(e){

     e.preventDefault();

     // isMouseDown = true;

     if (isMouseDown) {

         // console.log("mouse move");

         var curLoc = windowToCanvas(e.clientX,e.clientY);

         var s = calcDistance(curLoc , lastLoc);

         var t = curTimestamp - lastTimestamp;

         context.beginPath();

         context.moveTo(lastLoc.x , lastLoc.y);

         context.lineTo( curLoc.x , curLoc.y);

         context.strokeStyle = 'black';

         context.lineWidth = 20;

         context.lineCap="round"

         context.lineJoin = "round"

         context.stroke();

         lastLoc = curLoc;

         curTimestamp = lastTimestamp;

         lastLineWidth = lineWidth;

     };

 }

 var maxLineWidth = 30;

 var minLineWidth = 1 ;

 var maxStrokeV = 10;

 var minStrokeV = 0.1;

 function calcLineWidth(t,s){

     var v = s/t;

     var resultLineWidth;

     if ( v <= minStrokeV)

         resultLineWidth = maxLineWidth;

     else if( v >= maxStrokeV)

         resultLineWidth = minLineWidth;

     else

         resultLineWidth = maxLineWidth - (v-minStrokeV )/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth)

     if (lastLineWidth == -1) {

         return resultLineWidth;

     };

     return resultLineWidth*2/3 + resultLineWidth*1/3;

 }

 function calcDistance(loc1 , loc2){

     return Math.sqrt((loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y));

 }

 function windowToCanvas(x,y){

     var bbox = canvas.getBoundingClientRect();

     return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};

 }

 function drawGrid(){

     context.save();

 context.strokeStyle = "rgb(230,11,9)";

 context.beginPath();

 context.moveTo(3,3);

 context.lineTo(canvasWidth - 3 , 3 );

 context.lineTo(canvasWidth - 3 , canvasHeight - 3 );

 context.lineTo(3 , canvasHeight - 3  );

 context.closePath();

 context.lineWidth = 6;

 context.stroke();

 context.beginPath();

 context.moveTo(0,0);

 context.lineTo(canvasWidth,canvasHeight);

 context.moveTo(canvasWidth,0);

 context.lineTo(0,canvasHeight);

 context.moveTo(canvasWidth/2,0);

 context.lineTo(canvasWidth/2,canvasHeight);

 context.moveTo(0,canvasHeight/2);

 context.lineTo(canvasWidth,canvasHeight/2);

 context.lineWidth = 1;

 context.stroke();

 context.restore();

 }

巴特西

H5 canvas pc 端米字格写字板

最新文章

热门文章

巴特西

H5 canvas pc 端米字格 写字板

最新文章

热门文章

H5 canvas pc 端米字格写字板