我在互联网上找到了此代码，并一直在使用它。它将文本添加到画布上的任何点。这很好，但是当新文本添加到画布时，先前的文本将被删除。是否有一种简单的方法可以在画布上同时存在多个文本实例？
我是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>
原因是每次都设置了画布大小。发生这种情况时：
当用户代理将位图尺寸设置为宽度和高度时，它必须运行以下步骤：
...
3.将临时位图的大小调整为新的宽度和高度，然后将其清除为完全透明的黑色。
因此，要做的第一件事是在元素标签（如下所示）或代码的父范围中预先设置canvas元素的大小：
<div id="main">
<canvas id="c" width=500 height=300></canvas> <!-- any size you want -->
</div>
然后从JavaScript中删除这些行：
function saveTextFromArea(y,x){
...snipped for example...
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var cw = canvas.clientWidth;
var ch = canvas.clientHeight;
//canvas.width = cw; // remove this line
//canvas.height = ch; // remove this line
...snipped for example...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句