<!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. Data Center手册(1):架构

    如图是数据中心的一个基本架构 最上层是Internet Edge,也叫Edge Router,也叫Border Router,它提供数据中心与Internet的连接. 连接多个网络供应商来提供冗余可靠 ...

  2. 使用Kubeadm(1.13+)快速搭建Kubernetes集群

    Kubeadm是管理集群生命周期的重要工具,从创建到配置再到升级,Kubeadm处理现有硬件上的生产集群的引导,并以最佳实践方式配置核心Kubernetes组件,以便为新节点提供安全而简单的连接流程并 ...

  3. emWin洗衣机简易操作界面，含uCOS-III和FreeRTOS两个版本

    第3期:洗衣机简易操作界面 配套例子:V6-904_STemWin提高篇实验_洗衣机简易操作界面(uCOS-III)V6-905_STemWin提高篇实验_洗衣机简易操作界面(FreeRTOS) 例程 ...

  4. #Java学习之路——基础阶段（第四篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  5. [Swift]LeetCode754. 到达终点数字 | Reach a Number

    You are standing at position 0 on an infinite number line. There is a goal at position target. On ea ...

  6. [Swift]LeetCode1002. 查找常用字符 | Find Common Characters

    Given an array A of strings made only from lowercase letters, return a list of all characters that s ...

  7. Java数据结构和算法 - 哈希表

    Q: 如何快速地存取员工的信息? A: 假设现在要写一个程序,存取一个公司的员工记录,这个小公司大约有1000个员工,每个员工记录需要1024个字节的存储空间,因此整个数据库的大小约为1MB.一般的计 ...

  8. mybatis generator自动生成代码时 只生成了insert 而没有其他的

    mybatis框架提供了非常好用的逆向工程插件,但是在使用过程中会有很多问题. 我在使用中就遇到了只生成insert和insertSeletive方法,而不生成其他根据primary key查询更新删 ...

  9. 如何为自己的pip包打造可以执行的系统命令

    1.我们在打包我们自己的Python Package的时候.我们不仅可以在代码中使用我们的package,而且可以添加一些可执行命令来执行自己的函数. 2 .我们应该怎么办呢? 1.首先新建目录以及文 ...

  10. JDBC编程，从入门到精通

    今天突然想多说两句,刚刚在知乎看到一个人说,在当今世界,没有技术型驱动的公司,全都是业务型.即便是表面上看似技术型公司,其本质还是为了服务业务.这段话推翻了我以前关于编程的所有看法,觉得颇有道理.下面 ...