欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Html5: Drawing with text

程序员文章站 2023-04-07 23:41:29
Drawing with text Click and drag to draw! ......
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>drawing with text</title>
<meta name="keywords" content="geovindu">
<meta name="description" content="涂聚文">  
<meta name="author" content="tim holman">
<style type="text/css">
@import "compass/css3";

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
  
    &:hover {
   span {
      display: none; 
    }
  }
}

canvas {
 cursor: crosshair;
  
}

span {
    font-family: 'georgia', cursive;
  font-size: 40px;
 position: fixed; 
  top: 50%;
  left: 50%;
  color: #000;
  margin-top: -40px;
  margin-left: -200px;
}
</style>
</head>

<body>
<canvas id='canvas'></canvas>
<span id='info'>click and drag to draw!<span>

<!-- 
  drawing with text:
  
  -  click and drag to draw.
  -  double click to clear.

  ported from java at http://www.generative-gestaltung.de

  by tim holman - @twholman

-->



<script type="text/javascript">
//a pen by tim holman
//https://onaircode.com/awesome-html5-canvas-examples-source-code/
// drawing with text. ported from generative design book - http://www.generative-gestaltung.de - original licence: http://www.apache.org/licenses/license-2.0

// application variables
var position = {x: 0, y: window.innerheight/2};
var counter = 0;
var minfontsize = 3;
var angledistortion = 0;
var letters = "中国人民解放了!中国人站起来了!涂聚文(geovin du),明者因事而变,知者随事而制!--《盐铁论》。there was a table set out under a tree in front of the house, and the march hare and the hatter were having tea at it: a dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head. 'very uncomfortable for the dormouse,' thought alice; 'only, as it's asleep, i suppose it doesn't mind.'";

// 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(event) {
    canvas.width = window.innerwidth;
    canvas.height = window.innerheight;
  }
}

function mousemove ( event ){
  mouse.x = event.pagex;
  mouse.y = event.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;
      }
    
    //console.log (position.x + math.cos( angle ) * stepsize)
      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( event ){
  mouse.down = true;
  position.x = event.pagex;
  position.y = event.pagey;
  
  document.getelementbyid('info').style.display = 'none';
}

function mouseup( event ){
    mouse.down = false;
}

function doubleclick( event ) {
  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>
</body>

</html>