Javascript 向HTML5画布添加多个文本实例
我在网上找到了这段代码，并一直在玩弄它。它将文本添加到画布上的任意点。这是伟大的，但当新的文本添加到画布上，以前的文本被删除。有没有一种简单的方法可以让多个文本实例同时存在于画布上 我是JS新手，在保存新文本后，在代码中看不到任何删除文本的内容。我真的希望我不必将所有文本连同x和y坐标一起保存在一个数组中，我还远远不够熟练 下面是我正在使用的代码，但是如果没有一些外部JS就无法工作，所以这里有一个指向我从中复制的工作版本的链接 提前感谢您的建议Javascript 向HTML5画布添加多个文本实例,javascript,html,text,canvas,Javascript,Html,Text,Canvas,我在网上找到了这段代码，并一直在玩弄它。它将文本添加到画布上的任意点。这是伟大的，但当新的文本添加到画布上，以前的文本被删除。有没有一种简单的方法可以让多个文本实例同时存在于画布上 我是JS新手，在保存新文本后，在代码中看不到任何删除文本的内容。我真的希望我不必将所有文本连同x和y坐标一起保存在一个数组中，我还远远不够熟练 下面是我正在使用的代码，但是如果没有一些外部JS就无法工作，所以这里有一个指向我从中复制的工作版本的链接 提前感谢您的建议 <!DOCTYPE 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>
$（'#c'）.mousedown（函数（e）{
如果（$（'#textAreaPopUp'）。长度==0）{
var mouseX=e.pageX-this.offsetLeft+$（“#c”）.position（）.left；
var mouseY=e.pageY-this.offsetTop；
//将文本区域框附加到用户单击以输入注释的画布
var textArea=“”；
var saveButton=“”；
var appendString=textArea+saveButton；
$（“#main”）.append（appendString）；
}否则{
$（'textarea#textareaTest'）。删除（）；
$（'#saveText'）。删除（）；
//$（'#textAreaPopUp'）。删除（）；
var mouseX=e.pageX-this.offsetLeft+$（“#c”）.position（）.left；
var mouseY=e.pageY-this.offsetTop；
//将文本区域框附加到用户单击以输入注释的画布
var textArea=“”；
var saveButton=“”；
var appendString=textArea+saveButton；
$（“#main”）.append（appendString）；
}
});
函数saveTextFromArea（y，x）{
//获取textarea的值，然后销毁它并单击save按钮
var text=$（'textarea#textareaTest'）.val（）；
$（'textarea#textareaTest'）。删除（）；
$（'#saveText'）。删除（）；
$（'#textAreaPopUp'）。删除（）；
//获取画布并添加文本函数
var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
var cw=canvas.clientWidth；
var ch=canvas.clientHeight；
canvas.width=cw；
canvas.height=ch；
//根据100px的文本宽度将文本拆分为数组
var phraseArray=getLines（ctx，text，100）；
//这会将文本函数添加到ctx
CanvasTextFunctions.enable（ctx）；
var计数器=0；
//设置字体样式
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）”；
//将每个短语绘制到屏幕上，使顶部位置每次增加20px，使其看起来有换行符
$.each（短语数组，函数（）{
//设置画布中的位置
var lineheight=fontsize*1.5；
变量换行符=++计数器；
换行符=换行符*行高；
var-topPlacement=y-$（“#c”）.position（）.top+newline；
var leftPlacement=x-$（“#c”）.position（）.left；
text=这个；
//画课文
ctx.drawText（字体、字体大小、左位置、上位置、文本）；
ctx.save（）；
ctx.restore（）；
});
//重置放置阴影，使任何其他图形都没有放置阴影
ctx.shadowOffsetX=0；
ctx.shadowOffsetY=0；
ctx.shadowBlur=0；
ctx.shadowColor=“rgba（0,0,0,0）”；
}
函数getLines（ctx、短语、maxPxLength）{
//根据“框”的宽度将文本区域文本分成几行
var wa=短语。拆分（“”），
短语数组=[]，
最后一句=”，
l=最大长度，
测度=0；
ctx.font=“16px无衬线”；
对于（var i=0；i，原因是每次都设置画布大小。发生这种情况时：
当用户代理将位图尺寸设置为宽度和高度时，
它必须运行以下步骤：
…
3.将划痕位图调整为新的宽度和高度，并将其清除为完全透明的黑色
因此，要做的第一件事是在元素标记（如下所示）或代码的父范围中预设画布元素的大小：
<div id="main">
<canvas id="c" width=500 height=300></canvas> <!-- any size you want -->
</div>
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...