<!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. Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  2. [Swift]LeetCode80. 删除排序数组中的重复项 II | Remove Duplicates from Sorted Array II

    Given a sorted array nums, remove the duplicates in-place such that duplicates appeared at most twic ...

  3. [SQL]LeetCode175. 组合两个表 | Combine Two Tables

    Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...

  4. [Swift]LeetCode756. 金字塔转换矩阵 | Pyramid Transition Matrix

    We are stacking blocks to form a pyramid. Each block has a color which is a one letter string, like ...

  5. [Swift]LeetCode848. 字母移位 | Shifting Letters

    We have a string S of lowercase letters, and an integer array shifts. Call the shift of a letter, th ...

  6. [Swift]LeetCode922.按奇偶排序数组 II | Sort Array By Parity II

    Given an array A of non-negative integers, half of the integers in A are odd, and half of the intege ...

  7. python-正则表达式练习

    1.匹配普通URL ^(http://)([a-z]+)\.([a-z]+)\.(com|cn|net|edu)(/(\w)+)+(.+) 2.匹配type返回的字符串中的类型 import re r ...

  8. java线程阻塞唤醒的四种方式

    java在多线程情况下,经常会使用到线程的阻塞与唤醒,这里就为大家简单介绍一下以下几种阻塞/唤醒方式与区别,不做详细的介绍与代码分析 suspend与resume Java废弃 suspend() 去 ...

  9. Netty(一) SpringBoot 整合长连接心跳机制

    前言 Netty 是一个高性能的 NIO 网络框架,本文基于 SpringBoot 以常见的心跳机制来认识 Netty. 最终能达到的效果: 客户端每隔 N 秒检测是否需要发送心跳. 服务端也每隔 N ...

  10. solr之环境配置四

    Solr链接数据库(mysql,mssql) 一.链接mysql 1.使用DataImportHandler导入并索引数据,配置 $SOLR_HOME\core0\conf\solrconfig.xm ...