[英]multiple canvases are not working
I tried to generate multiple canvases on the fly and when I create a new canvas, the previous one disappears. 我试图动态生成多个画布,当我创建一个新画布时,前一个消失了。 See here for an example: 请参见此处的示例:
http://jsfiddle.net/adrianh/5jspv/4/ http://jsfiddle.net/adrianh/5jspv/4/
Here is the javascript code: 这是JavaScript代码:
var circleCount = 0;
function circleRect(rect)
{
var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height);
var cx = (rect.right + rect.left)/2;
var cy = (rect.top + rect.bottom)/2;
var left = Math.floor(cx - diameter/2);
var top = Math.floor(cy - diameter/2);
diameter = Math.floor(diameter);
var html = "<canvas id='circleCanvas"+circleCount+"' "+
"width='"+(diameter+2)+"' "+
"height='"+(diameter+2)+"' "+
"style='"+
"position:absolute;"+
"z-index:0;"+
"left:"+(left-1)+"px;"+
"top:"+(top-1)+"px;"+
//"border:1px solid;"+
"' />";
alert(html);
var container = document.getElementById("circles");
container.innerHTML += html;
var c=document.getElementById("circleCanvas"+circleCount);
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI);
ctx.stroke();
++circleCount;
}
$(".circled").each(function(i, obj) {
var rect = obj.getBoundingClientRect();
circleRect(rect);
});
Why is only one canvas showing up? 为什么只显示一张画布?
It will be more reliable to manipulate the DOM rather than trying to inline things with innerHTML
. 操作DOM而不是尝试使用innerHTML
内联操作会更加可靠。 This code uses jQuery's DOM manipulation methods : 这段代码使用jQuery的DOM操作方法 :
var circleCount = 0;
function circleRect(rect)
{
var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height);
var cx = (rect.right + rect.left)/2;
var cy = (rect.top + rect.bottom)/2;
var left = Math.floor(cx - diameter/2);
var top = Math.floor(cy - diameter/2);
diameter = Math.floor(diameter);
var html = $("<canvas id='circleCanvas"+circleCount+"' "+
"width='"+(diameter+2)+"' "+
"height='"+(diameter+2)+"' "+
"style='"+
"position:absolute;"+
"z-index:0;"+
"left:"+(left-1)+"px;"+
"top:"+(top-1)+"px;"+
"' />");
$("#circles").append(html);
var ctx=html[0].getContext("2d");
ctx.beginPath();
ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI);
ctx.stroke();
++circleCount;
}
You could also use the standard createElement
and appendChild
if you don't really need jQuery. 如果您确实不需要jQuery,也可以使用标准的createElement
和appendChild
。
The innerHTML
property has a number of drawbacks , although there is nothing specific I can find about not using +=
with it, the fact that insertAdjacentHTML
exists would seem to indicate that you shouldn't really expect it to work well. innerHTML
属性有很多缺点 ,尽管我没有找到关于不使用+=
,但是insertAdjacentHTML
存在的事实似乎表明您不应该真正期望它能很好地工作。 (forgot this bit earlier) In this case, as you correctly surmised in your comment, the canvas
you've drawn on is replaced by a new one when the assignment to innerHTML
happens. (在此之前忘记了这一点)在这种情况下,正如您在评论中正确推测的那样,当对innerHTML
的分配发生时,您绘制的canvas
将替换为新的canvas
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.