<!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. tensorflow-线性函数训练例子一

    import tensorflow as tfimport numpy as np #create datax_data = np.random.rand(100).astype(np.float32 ...

  2. Mesos源码分析(10): MesosSchedulerDriver的启动及运行一个Task

      MesosSchedulerDriver的代码在src/sched/sched.cpp里面实现.     Driver->run()调用start()     首先检测Mesos-Maste ...

  3. IIS集中化管理与编程REST API

    目录 一.       简介.... 1 二.       安装.... 1 三.       IIS Administration配置文件.... 2 四.       Web UI管理界面.... ...

  4. 【安富莱专题教程第5期】工程调试利器RTT实时数据传输组件，替代串口调试，速度飞快，可以在中断和多任务中随意调用

    说明:1.串口作为经典的调试方式已经存在好多年了,缺点是需要一个专门的硬件接口.现在有了SEGGER的RTT(已经发布有几年了),无需占用系统额外的硬件资源,而且速度超快,是替代串口调试的绝佳方式.2 ...

  5. HTML入门教程，多年心血总结，一看就会

    笔者在武汉蚂蹄软件服务中心做软件开发多年,最近花一天时间总结出一套HTML入门级的教程,全篇没有任何废话,全部是精华,希望对你入门web开发有一定的帮助. HTML基本格式 <html> ...

  6. [Abp 源码分析]四、模块配置

    0.简要介绍 在 Abp 框架当中通过各种 Configuration 来实现模块的配置,Abp 本身提供的很多基础设施功能的一些在运行时的行为是通过很多不同的 Configuration 来开放给用 ...

  7. dataframe的select传入不定参数

    在提取 dataframe 里面的列时,需要传入不定参数,即 dataframe.select(args) .例如某个 dataframe 如下: 一般提取某列或者某几列的时候是这样子写的: data ...

  8. .net core使用RPC方式进行高效的HTTP服务访问

    传统的HTTP接口调用是一件比较繁琐的事情,特别是在Post数据的时候:不仅要拼访问的URL还是把数据序列化成流的方式给Request进行提交,获取Respons后还要对流进行解码.在实际应用虽然可以 ...

  9. 解决Springboot 的ajax跨域问题-动静分离

    @SpringBootApplication public class FsSysApiApp { public static void main(String[] args) { SpringApp ...

  10. iOS逆向开发（6）：微信伪造位置

    仍然以微信为例,实战地练习一下使用Reveal.iOSOpenDev等工具注入APP的流程,积累经验.这一系列的文章都是学习过程的总结,不带任何商业目的. 本文解决一个问题:如何伪造一个经纬度,在微信 ...