canvas田字格效果程式碼例項

admin發表於2017-02-10
Canvas
本章節分享一段程式碼例項，它實現了寫字的田字格效果。

這個大家一定都不陌生，因為在小學的時候都會使用這樣田字格的寫字本。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
#canvas {
  display: block;
  margin: 10px auto;
}
.box {
  width: 800px;
  height: 36px;
  margin: 0 auto;
  position: relative;
}
.box p {
  float: left;
  height: 36px;
  width: 80%;
}
.box p span {
  height: 36px;
  width: 50px;
  background: gray;
  float: left;
  display: inline-block;
  margin-right: 15px;
}
.box p span.active {
  width: 46px;
  height: 32px;
  border: 2px solid #000;
}
.box a {
  display: block;
  height: 34px;
  line-height: 34px;
  padding: 0 20px;
  border: 1px solid #c0c0c0;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
  color: #666;
  text-decoration: none;
}
 
.box a:hover {
  opacity: 0.8;
}
 
.box p span.s_1 {
  background: red;
}
.box p span.s_2 {
  background: orange;
}
.box p span.s_3 {
  background: darkorchid;
}
.box p span.s_4 {
  background: dodgerblue;
}
.box p span.s_5 {
  background: forestgreen;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
window.onload = function () {
  var canvasWidth = 800;
  var canvasHeight = 800;
  var isMouseDown = false;
  var canvas = document.querySelector('#canvas');
  var cxt = canvas.getContext('2d');
  var lastLineWidth = -1
  var minStrokeV = 0.1;
  var maxStrokeV = 10;
  var maxLineWidth = 30;
  var minLineWidth = 1;
  var color = 'red';
  //上一次滑鼠位置；
  var lastLoc = { x: 0, y: 0 }
  //上一次滑鼠按下的時間；
  var lastTimeStap = 0;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  drawGrid()
  //滑鼠事件；
  canvas.onmousedown = function (e) {
    e.preventDefault();
    lastLoc = windowToCanvas(e.clientX, e.clientY);
    lasttimestap = new Date().getTime();
    isMouseDown = true;
  }
  canvas.onmouseup = function (e) {
    e.preventDefault();
    isMouseDown = false;
  }
  canvas.onmouseout = function (e) {
    e.preventDefault();
    isMouseDown = false;
  }
  canvas.onmousemove = function (e) {
    e.preventDefault();
    if (isMouseDown) {
      var curLoc = windowToCanvas(e.clientX, e.clientY);
      var curTimeStap = new Date().getTime();
      var s = calcDistance(curLoc, lastLoc)
      var t = curTimeStap - lastTimeStap;
      var lineWidth = calcLineWidth(s, t)
      //繪製寫字筆畫
      cxt.beginPath();
      cxt.moveTo(lastLoc.x, lastLoc.y);
      cxt.lineTo(curLoc.x, curLoc.y);
      cxt.lineWidth = lineWidth;
      cxt.lineCap = 'round';
      cxt.lineJoin = 'round';
      cxt.strokeStyle = color;
      cxt.stroke()
      lastLoc = curLoc;
      lastTimeStap = curTimeStap;
      lastLineWidth = lineWidth
    }
  }
  //計算距離
  function calcDistance(loc1, loc2) {
    return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y))
  }
  //計算最終線條寬度
  function calcLineWidth(s, t) {
    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 lastLineWidth * 2 / 3 + resultLineWidth * 1 / 3;
  }
  //相對canvas的座標；
  function windowToCanvas(x, y) {
    var canvasObj = canvas.getBoundingClientRect();
    return { x: Math.round(x - canvasObj.left), y: Math.round(y - canvasObj.top) }
  }
  //繪製米字:
  function drawGrid() {
    cxt.save();
    cxt.strokeStyle = "#b30000";
    cxt.lineWidth = 6;
    cxt.beginPath();
    cxt.moveTo(0, 0);
    cxt.lineTo(canvas.width, 0);
    cxt.lineTo(canvas.width, canvas.height);
    cxt.lineTo(0, canvas.height);
    cxt.closePath()
    cxt.stroke();
 
    cxt.beginPath;
    cxt.moveTo(0, 0);
    cxt.lineTo(canvas.width, canvas.height);
 
    cxt.moveTo(0, canvas.height);
    cxt.lineTo(canvas.width, 0);
 
    cxt.moveTo(0, canvas.height / 2)
    cxt.lineTo(canvas.width, canvas.height / 2)
 
    cxt.moveTo(canvas.width / 2, 0)
    cxt.lineTo(canvas.width / 2, canvas.height)
 
    cxt.lineWidth = 1;
    cxt.stroke()
 
    cxt.restore();
  }
 
  //點選按鈕變色
  $('.box p span').click(function () {
    color = $(this).css('background-color')
    $(this).addClass('active').siblings().removeClass('active');
  })
  //清除
  $('.box a').click(function () {
    cxt.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid()
  })
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
  <div class="box">
    <p>
      <span class="s_1 active"></span>
      <span class="s_2 "></span>
      <span class="s_3"></span>
      <span class="s_4"></span>
      <span class="s_5"></span>
    </p>
    <a href="#">清除</a>
  </div>
</body>
</html>

相關文章