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>
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}
canvas {
  cursor: crosshair;
}
span {
  font-family: 'Georgia', cursive;
  font-size: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  color: #a79e17;
  margin-top: -40px;
  margin-left: -200px;
}
</style>
<script>
window.onload=function(){
  // Application variables
  var position = { x: 0, y: window.innerHeight / 2 };
  var counter = 0;
  var minFontSize = 3;
  var angleDistortion = 0;
  var letters = "螞蟻部落，div教程，css教程，正規表示式。青島市南區，ajax教程，json教程，特效程式碼下載。";
 
 
  // Drawing variables
  var canvas;
  var context;
  var mouse = { x: 0, y: 0, down: false }
 
  function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
 
    canvas.addEventListener('mousemove', mouseMove, false);
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mouseout', mouseUp, false);
    canvas.addEventListener('dblclick', doubleClick, false);
 
    window.onresize = function (ev) {
      var oEvent = event || ev;
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
  }
 
  function mouseMove(ev) {
    var oEvent = event || ev;
    mouse.x = oEvent.pageX;
    mouse.y = oEvent.pageY;
    draw();
  }
 
  function draw() {
    if (mouse.down) {
      var d = distance(position, mouse);
      var fontSize = minFontSize + d / 2;
      var letter = letters[counter];
      var stepSize = textWidth(letter, fontSize);
 
      if (d > stepSize) {
        var angle = Math.atan2(mouse.y - position.y, mouse.x - position.x);
 
        context.font = fontSize + "px Georgia";
 
        context.save();
        context.translate(position.x, position.y);
        context.rotate(angle);
        context.fillText(letter, 0, 0);
        context.restore();
 
        counter++;
        if (counter > letters.length - 1) {
          counter = 0;
        }
 
        position.x = position.x + Math.cos(angle) * stepSize;
        position.y = position.y + Math.sin(angle) * stepSize;
      }
    }
  }
 
  function distance(pt, pt2) {
    var xs = 0;
    var ys = 0;
 
    xs = pt2.x - pt.x;
    xs = xs * xs;
 
    ys = pt2.y - pt.y;
    ys = ys * ys;
 
    return Math.sqrt(xs + ys);
  }
  function mouseDown(ev) {
    var oEvent = ev || event
    mouse.down = true;
    position.x = oEvent.pageX;
    position.y = oEvent.pageY;
    document.getElementById('info').style.display = 'none';
  }
 
  function mouseUp(ev) {
    mouse.down = false;
  }
 
  function doubleClick(ev) {
    canvas.width = canvas.width;
  }
 
  function textWidth(string, size) {
    context.font = size + "px Georgia";
    if (context.fillText) {
      return context.measureText(string).width;
    } else if (context.mozDrawText) {
      return context.mozMeasureText(string);
    }
  };
  init();
}
</script>
</head>
<body>
<canvas id='canvas'></canvas>
<span id='info'>螞蟻部落歡迎您</span>
</body>
</html>

相關文章