command-manager/canvas.html
2015-12-02 13:48:56 +08:00

115 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./static/js/terminal/index.js"></script>
<style type="text/css">
#term {
color: #fff;
background-color: #181818;
font: 13px/1.5 Consolas, sans-serif;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
<div id="term"></div>
<script>
// var font = '13px Consolas';
var font = '13px 微软雅黑';
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var span = document.createElement('span');
span.style.font = font;
span.style.margin = '0';
span.style.padding = '0';
span.style.lineHeight = '100%';
span.style.visibility = 'hidden';
span.style.position = 'absolute';
span.style.zIndex = '-1';
span.style.top = '-100%';
span.style.right = '-100%';
// 设置文字属性
context.font = font;
span.innerHTML = 'Canvas绘制文字';
document.body.appendChild(span);
console.dir(span.getBoundingClientRect());
var height = span.getBoundingClientRect().height;
document.body.removeChild(span);
context.save();
context.lineWidth = 1;
context.strokeStyle = '#00f';
context.translate(0.5, 0.5);
context.beginPath();
context.moveTo(0, height + 1);
context.lineTo(context.measureText('Canvas绘制文字').width, height + 1);
context.stroke();
context.restore();
context.fillStyle = '#00f';
context.textBaseline = 'top';
// 填充字符串
context.fillText('Canvas绘制文字', 0, 0);
var C = context.measureText('C').width;
var a = context.measureText('a').width;
console.log(context.measureText('C'));
console.log(context.measureText('a'));
console.log('C: ', C);
console.log('a: ', a);
console.log('C + a: ', C + a);
console.log('Ca: ', context.measureText('Ca').width);
var xterm = new AnsiTerminal(80, 60, 100);
xterm.debug = false;
function write(){
[
'\r\n\u001b[32m\'use strict\'\u001b[39m\u001b[38;5;248m;\u001b[39m',
'\u001b[38;5;248m/*jshint browser:true */\u001b[39m',
'',
'\u001b[32mvar\u001b[39m \u001b[37mTerminal\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[32m\'./term\'\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[32m,\u001b[39m',
' \u001b[37mthrough\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[37mrequire\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[32m\'through\'\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m;\u001b[39m',
'',
'\u001b[37mmodule\u001b[39m\u001b[32m.\u001b[39m\u001b[37mexports\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[38;5;39mfunction\u001b[39m \u001b[38;5;248m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[38;5;248m)\u001b[39m \u001b[33m{\u001b[39m',
' \u001b[32mvar\u001b[39m \u001b[37mterm\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[31mnew\u001b[39m \u001b[37mTerminal\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[37mcols\u001b[39m\u001b[32m,\u001b[39m \u001b[37mrows\u001b[39m\u001b[32m,\u001b[39m \u001b[37mhandler\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m;\u001b[39m',
' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mopen\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m;\u001b[39m',
' ',
' \u001b[32mvar\u001b[39m \u001b[37mhypernal\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[37mthrough\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m;\u001b[39m',
' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendTo\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[38;5;39mfunction\u001b[39m \u001b[38;5;248m(\u001b[39m\u001b[37melem\u001b[39m\u001b[38;5;248m)\u001b[39m \u001b[33m{\u001b[39m',
' \u001b[38;5;39mif\u001b[39m \u001b[38;5;248m(\u001b[39m\u001b[38;5;39mtypeof\u001b[39m \u001b[37melem\u001b[39m \u001b[38;5;214m===\u001b[39m \u001b[32m\'string\'\u001b[39m\u001b[38;5;248m)\u001b[39m \u001b[37melem\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[37mdocument\u001b[39m\u001b[32m.\u001b[39m\u001b[37mquerySelector\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[37melem\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m;\u001b[39m',
'',
' \u001b[37melem\u001b[39m\u001b[32m.\u001b[39m\u001b[37mappendChild\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m;\u001b[39m',
' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37melement\u001b[39m\u001b[32m.\u001b[39m\u001b[37mstyle\u001b[39m\u001b[32m.\u001b[39m\u001b[37mposition\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[32m\'relative\'\u001b[39m\u001b[38;5;248m;\u001b[39m',
' \u001b[33m}\u001b[39m\u001b[38;5;248m;\u001b[39m',
'',
' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[38;5;39mfunction\u001b[39m \u001b[38;5;248m(\u001b[39m\u001b[37mline\u001b[39m\u001b[38;5;248m)\u001b[39m \u001b[33m{\u001b[39m',
' \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwriteln\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[37mline\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m;\u001b[39m',
' \u001b[33m}\u001b[39m\u001b[38;5;248m;\u001b[39m',
'',
' \u001b[37mhypernal\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m \u001b[38;5;214m=\u001b[39m \u001b[37mterm\u001b[39m\u001b[32m.\u001b[39m\u001b[37mwrite\u001b[39m\u001b[32m.\u001b[39m\u001b[37mbind\u001b[39m\u001b[38;5;248m(\u001b[39m\u001b[37mterm\u001b[39m\u001b[38;5;248m)\u001b[39m\u001b[38;5;248m;\u001b[39m',
'',
' \u001b[31mreturn\u001b[39m \u001b[37mhypernal\u001b[39m\u001b[38;5;248m;\u001b[39m',
'\u001b[33m}\u001b[39m\u001b[38;5;248m;\u001b[39m',
''
].forEach(function (line){ xterm.write(line + '\r\n'); });
xterm.write('\033[41;32m红底绿字\033[0m' + new Date().toISOString());
document.getElementById('term').innerHTML = xterm.toString('html');
setTimeout(write, 1000);
}
write();
</script>
</body>
</html>