HTML5在画布上编辑文本

Question

HTML5在画布上编辑文本

asa*_*ura 3 javascript html5 canvas

我正在尝试创建类似于http://www.listhings.com的内容,您可以在其中编辑画布中的文本.

我已阅读其他帖子HTML5 Canvas Text Edit.但我不想编辑画布外的文本.我想编辑画布中的文本.

如果有人能指出我正确的方向,我会很感激.
谢谢

Answer 1

mar*_*rkE 7

首先,Mohsen正确地指出,当你做context.fillText时,你实际上是在画布上"画一幅字母".它不像文字处理器!

您可以捕获窗口上的关键事件,然后将击键写入画布.

这是代码和小提琴:http://jsfiddle.net/m1erickson/7tXd4/

此示例仅键入小写az(无大写,空格,退格等)

您可能希望进行更多这样的增强:

添加更多键(AZ,0-9等).
响应命令键,如退格键,从keyHistory中删除字母.
放置一个光标,以便用户在输入时知道它们在线上的位置(提示:http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/)
如果允许多行文本,请处理[enterkey]并移至新行.
等等

这里的代码只是为了让您入门:

<!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>

Run Code Online (Sandbox Code Playgroud)

对于键处理有更好的解决方案,不仅包括英文字母:function keyPressHandler(event){addletter(String.fromCharCode(event.charCode)); } (2认同)

归档时间：	12 年，10 月前
查看次数：	18447 次
最近记录：	6 年，2 月前