<!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. truffle 开发入门教程

    1.安装nodejs 2.安装truffle:执行命令: npm install -g truffle 3.truffle init  (可加项目名) 4.windows 要删除根目录中的 truff ...

  2. html5 postMessage 实现类似 sendMessage 的同步效果，支持跨域

    实现一个客户端发送 “save 一个答案,在获取答案, 跨域的另一个页面中,回调返回”3“的场景. 客户端:请在 http://127.0.0.1/pk/index.html 打开 <html& ...

  3. TCP的三次握手过程与四次挥手

    TCP握手协议 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确 ...

  4. macOS 10.14虚拟机安装教程

    windows10下安装vmware14.0以及macOS 10.14图文详解 工具/原料   windows10 vmware 14.0 macOS 10.14懒人版 mac补丁unlocker工具 ...

  5. 私有云的难处—为什么需要CloudEngine？

    私有云的难处 ——我们为什么需要 CloudEngine? 郑昀 创建于2016/7/31 最后更新于2016/8/3 关键词: 容器.Docker.OpenStack.虚拟机.私有云.Mesos.配 ...

  6. [Swift]LeetCode243.最短单词距离 $ Shortest Word Distance

    Given a list of words and two words word1 and word2, return the shortest distance between these two ...

  7. Windows环境安装运行：Angular.js

    一.下载 Node.js https://nodejs.org/en/download/ 检测版本: cmd: node -v 二.安装typescript和typings 使用 Node.js 包管 ...

  8. SpringBoot前后端分离Instant时间戳自定义解析

    在SpringBoot项目中,前后端规定传递时间使用时间戳(精度ms). @Data public class Incident { @ApiModelProperty(value = "故 ...

  9. 被BAT疯抢的工程师，都是怎么拿到50万年薪Offer的？

    许多工程师换工作常会出现这种情况:工作能力和潜力都不错,却在面试时无法充分地表现自己,铩羽而归.据拉勾数据调研显示,约有80%的工程师简历通不过初筛,进入终面的不到5% . 技术面试到底应该如何准备? ...

  10. 面试中程序员常见的Redis"刁难"问题，值得一读！

    导读 在程序员面试过程中Redis相关的知识是常被问到的话题.作为一名在互联网技术行业打击过成百上千名的资深技术面试官,总结了面试过程中经常问到的问题.十分值得一读. Redis有哪些数据结构? 字符 ...