[英]Multiple html5 canvas elements: performance issue?
Regardless of the javascript, is there a performance problem when adding multiple html5 canvas elements for the purpose of displaying canvas made icon? 无论javascript如何,为了显示画布制图标而添加多个html5画布元素是否存在性能问题? I mean is there a difference performancewise between a div and canvas sematic element?
我的意思是div和canvas sematic元素之间在性能上有区别吗?
I am trying to step away from images, svg and even fontawesome, thats why im asking. 我试图远离图像,svg甚至fontawesome,这就是为什么我要求。
Based on the request, I have this short code: 根据请求,我有这个简短的代码:
var canvas = document.createElement("canvas"); canvas.width = 250; canvas.height = 80; var ctx = canvas.getContext("2d"); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, 250, 80); //draw a red box ctx.fillStyle = "#FF0000"; ctx.font = "30px Tahoma"; ctx.fillText("Hello World", 45, 50); var dataURL = canvas.toDataURL(); document.getElementById("img-data").innerHTML = dataURL; document.getElementById("canvas-mirror").src = dataURL;
<div id="img-data"></div> <img id="canvas-mirror"></div>
In short, 简而言之,
Yes, 是,
Performance depends on the total area of all canvases, try to keep it( total area of canvas) small. 性能取决于所有画布的总面积,尽量保持它(画布的总面积)小。
If you are planning to use canvas then try to use clipping option , it will increase performance. 如果您打算使用canvas然后尝试使用裁剪选项,它将提高性能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.