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

　　

Html5: Drawing with text的更多相关文章

  1. e591. Drawing Simple Text

    See also e575 The Quintessential Drawing Program. public void paint(Graphics g) { // Set the desired ...

  2. html5 canvas simple drawing

    var c = canvas.getContext("2d");//get canvas 2d context canvas including a proposed 3D con ...

  3. 程序员用HTML5制作的爱心树表白动画

    体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...

  4. [OpenCV] Samples 01: drawing

    基本的几何图形,标注功能. commondLineParser的使用参见:http://blog.csdn.net/u010305560/article/details/8941365 #includ ...

  5. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  6. 让IE8支持HTML5及canvas功能！

    微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了. 即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧. 首先,需要让IE支持HTM ...

  7. html5 drag api详解

    可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...

  8. [HTML5] Input accepts only 6 number characters

    Use 'pattern' tag in html5: <input type="text" pattern="[0-9]{6}" maxlength=& ...

  9. Subline Text默认设置文件Preferences.sublime-settings—Default详解

    Subline Text中,点击Preferences,选择Settings - Default 全部属性解析 // While you can edit this file, it's best t ...

随机推荐

  1. FCC（ES6写法） No repeats please

    把一个字符串中的字符重新排列生成新的字符串,返回新生成的字符串里没有连续重复字符的字符串个数.连续重复只以单个字符为准. 例如, aab 应该返回 2 因为它总共有6中排列 (aab, aab, ab ...

  2. FluentDataflow - Fluent Style TPL Dataflow

    我的新英文博客文章: FluentDataflow - Fluent Style TPL Dataflow 介绍了本人最新发布的一个开源类库:FluentDataflow--Fluent风格的TPL ...

  3. Python函数声明以及与其他编程语言数据类型的比较

    1.函数声明 与其它大多数语言一样 Python 有函数,但是它没有像 C++ 一样的独立的头文件:或者像 Pascal 一样的分离的  interface / implementation 段.在需 ...

  4. [Swift]LeetCode400. 第N个数字 | Nth Digit

    Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note:n is ...

  5. [Swift]LeetCode851. 喧闹和富有 | Loud and Rich

    In a group of N people (labelled 0, 1, 2, ..., N-1), each person has different amounts of money, and ...

  6. Kubernetes---存储

    pod中定义需要的存储卷,类型为pvc pvc 与  pv 建立绑定关系 kubectl explain pv 定义pv时不要加namspce

  7. Redis 设计与实现 （三）--持久化

    RDB 持久化 一.生成RDB cmd:SAVE  --阻塞进程,执行完,才能有效接收客户端命令. cmd:  BGSAVE  --非阻塞,开启子进程保存. 客户端如果发送SAVE和BGSAVE命令直 ...

  8. Spring MVC知识

    f-sm-1. 讲下SpringMvc和Struts1,Struts2的比较的优势 性能上Struts1>SpringMvc>Struts2 开发速度上SpringMvc和Struts2差 ...

  9. 基于 Redis 的分布式锁

    前言 分布式锁在分布式应用中应用广泛,想要搞懂一个新事物首先得了解它的由来,这样才能更加的理解甚至可以举一反三. 首先谈到分布式锁自然也就联想到分布式应用. 在我们将应用拆分为分布式应用之前的单机系统 ...

  10. 『2019/4/8 TGDay1模拟赛 反思与总结』

    2019/4/8 TGDay1模拟赛 这次是和高一的学长学姐们一起参加的\(TG\)模拟考,虽然说是\(Day1\),但是难度还是很大的,感觉比\(18\)年的\(Day1\)难多了. 还是看一下试题 ...