【发布时间】：2014-02-22 06:35:07
【问题描述】：
我在互联网上找到了这段代码，并一直在玩弄它。它将文本添加到画布上的任何点。这很好，但是当新文本添加到画布时，以前的文本会被删除。有没有一种简单的方法可以让多个文本实例同时存在于画布上？
我是 JS 新手，在保存新文本后无法在代码中看到删除文本的任何内容。我真的希望我不必将所有文本连同 x 和 y 坐标一起保存在一个数组中，我还远远不够熟练地做到这一点。
我正在使用的代码如下，但如果没有一些外部 JS，它将无法工作，所以这里是我复制它的工作版本的链接。 http://oldstatic.travisberry.com/demos/canvas-text-demo/index.html
提前感谢您的任何建议
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div id="main">
<canvas id="c"></canvas><!-- the canvas -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="text.js"></script><!-- Library to help text -->
<script type="text/javascript">
$('#c').mousedown(function(e){
if ($('#textAreaPopUp').length == 0) {
var mouseX = e.pageX - this.offsetLeft + $("#c").position().left;
var mouseY = e.pageY - this.offsetTop;
//append a text area box to the canvas where the user clicked to enter in a comment
var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>";
var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>";
var appendString = textArea + saveButton;
$("#main").append(appendString);
} else {
$('textarea#textareaTest').remove();
$('#saveText').remove();
//$('#textAreaPopUp').remove();
var mouseX = e.pageX - this.offsetLeft + $("#c").position().left;
var mouseY = e.pageY - this.offsetTop;
//append a text area box to the canvas where the user clicked to enter in a comment
var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>";
var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>";
var appendString = textArea + saveButton;
$("#main").append(appendString);
}
});
function saveTextFromArea(y,x){
//get the value of the textarea then destroy it and the save button
var text = $('textarea#textareaTest').val();
$('textarea#textareaTest').remove();
$('#saveText').remove();
$('#textAreaPopUp').remove();
//get the canvas and add the text functions
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var cw = canvas.clientWidth;
var ch = canvas.clientHeight;
canvas.width = cw;
canvas.height = ch;
//break the text into arrays based on a text width of 100px
var phraseArray = getLines(ctx,text,100);
// this adds the text functions to the ctx
CanvasTextFunctions.enable(ctx);
var counter = 0;
//set the font styles
var font = "sans";
var fontsize = 12;
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgba(0,0,0,1)";
//draw each phrase to the screen, making the top position 20px more each time so it appears there are line breaks
$.each(phraseArray, function() {
//set the placement in the canvas
var lineheight = fontsize * 1.5;
var newline = ++counter;
newline = newline * lineheight;
var topPlacement = y - $("#c").position().top + newline;
var leftPlacement = x - $("#c").position().left;
text = this;
//draw the text
ctx.drawText(font, fontsize, leftPlacement, topPlacement, text);
ctx.save();
ctx.restore();
});
//reset the drop shadow so any other drawing don't have them
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgba(0,0,0,0)";
}
function getLines(ctx,phrase,maxPxLength) {
//break the text area text into lines based on "box" width
var wa=phrase.split(" "),
phraseArray=[],
lastPhrase="",
l=maxPxLength,
measure=0;
ctx.font = "16px sans-serif";
for (var i=0;i<wa.length;i++) {
var w=wa[i];
measure=ctx.measureText(lastPhrase+w).width;
if (measure<l) {
lastPhrase+=(" "+w);
}else {
phraseArray.push(lastPhrase);
lastPhrase=w;
}
if (i===wa.length-1) {
phraseArray.push(lastPhrase);
break;
}
}
return phraseArray;
}
</script>
<script src="js/text.js"></script>
<script src="js/js.js"></script>
</body>
【问题讨论】：
标签： javascript html text canvas