HTML5在画布上编辑文本 [英] HTML5 edit text on the canvas
问题描述
我尝试创建类似于 http://www.listhings.com 的位置，您可以在其中编辑
我已阅读过其他帖子 HTML5 Canvas文本编辑。但我不想编辑画布之外的文本。我想编辑画布中的文字。
如果有人能指出正确的方向，我会感激。
谢谢
首先，Mohsen正确地指出，当你做context.fillText时，你实际上是在画布上绘制一个字母的图片。
您可以捕获窗口上的关键事件，然后将击键写入画布。 p>
这里是代码和小提琴： http://jsfiddle.net/m1erickson/7tXd4 /
此示例只输入小写字母az（没有大写字母，空格，空格等）
您可能想要进行更多增强，例如：
- 添加更多键（AZ，0-9等） >
- 响应命令键（如退格键）以从keyHistory中删除字母。
- 放置游标，以便用户在输入时知道他们在线上的位置（提示： http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/ ）
- 如果允许多行文本，
这里是代码 strong>只是为了让您开始：
<！doctype html&
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ - reset css - >
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< style>
body {background-color：ivory; padding：20px; }
canvas {border：1px solid red;}
< / style>
< script>
$（function（）{
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
ctx.font =18px Arial;
var keyHistory =;
window.addEventListener（keyup，keyUpHandler，true）;
function addletter（letter）{
keyHistory + = letter;
ctx.clearRect（0,0,300,300）;
ctx.fillText（keyHistory，20,20）;
}
function keyUpHandler（event）{
var letters =abcdefghijklmnopqrstuvwxyz;
var key = event.keyCode;
if（key> 64& & key< 91）{
var letter = letters.substring（key-64，key-65）;
addletter（letter）;
}
}
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< p>首先点击< / p>< br />下的红色画布
< p>然后从a-z键入任何小写字母< / p>< br />
< canvas id =canvaswidth = 300 height = 100>< / canvas>
< / body>
< / html>
I'm trying to create something similar to http://www.listhings.com where you can edit the text within the canvas.
I've read the other post HTML5 Canvas Text Edit . But I don't want to edit the text outside of the canvas. I want to edit the text within the canvas.
I'd appreciate if anyone can point me in the right direction.
Thanks
First, Mohsen correctly points out that when you do context.fillText you are actually "painting a picture of letters" on the canvas. It's not like a word processor!
You can capture the key events on the window and then write the keystrokes out to your canvas.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/7tXd4/
This example ONLY types lowercase a-z (no capitals, spaces, backspaces, etc)
You will probably want to make more enhancements like these:
- Adding more keys (A-Z, 0-9, etc).
- Respond to command keys like backspace to remove letters from the keyHistory.
- Put a cursor so users know where they are on the line as they type (hint: http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/)
- If you allow multi-line text, handle the [enterkey] and move to the new line.
- Etc
Here's code just to get you started:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font="18px Arial";
var keyHistory="";
window.addEventListener("keyup", keyUpHandler, true);
function addletter(letter){
keyHistory+=letter;
ctx.clearRect(0,0,300,300);
ctx.fillText(keyHistory,20,20);
}
function keyUpHandler(event){
var letters="abcdefghijklmnopqrstuvwxyz";
var key=event.keyCode;
if(key>64 && key<91){
var letter=letters.substring(key-64,key-65);
addletter(letter);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<p>First click in the red canvas below</p><br/>
<p>Then type any lowercase letters from a-z</p><br/>
<canvas id="canvas" width=300 height=100></canvas>
</body>
</html>
这篇关于HTML5在画布上编辑文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
