草庐IT

canvas2d

全部标签

javascript - 拥有一个大 Canvas 还是最多 100 个动态生成的小 Canvas 更好?

我正在开发移动网络骰子模拟器。初始原型(prototype)在这里:http://dicewalla.com我目前有一个大Canvas,我可以在其中绘制所有骰子。我计划以更MVC且更易于更新的方式重新编写代码。我认为为每个骰子对象生成一个小Canvas比在大Canvas上绘制所有骰子并不断更新大Canvas更容易。我的问题是,让浏览器创建大量小Canvas与一个大Canvas相比,是否会对性能造成不良影响。很难在本地进行测试,我希望这里有人知道最佳做法是什么。 最佳答案 多个Canvas通常可以实现更好的性能,因为您可以有选择地重新

javascript - 使用 JsPDF 将 Canvas 转换为 Pdf

我正在尝试将canvas转换为pdf,但我得到的结果是干净的白色pdf这是代码,我无法弄清楚我错过了什么..functionHtmlToImage(){html2canvas(document.body,{onrendered:function(canvas){varimg=canvas.toDataURL("image/jpeg,1.0");varpdf=newjsPDF();pdf.addImage(img,'JPEG',0,0);pdf.output('datauri');}});} 最佳答案 试试这个:varpdf=newj

javascript - 饼图、条形图、线 : SVG/VML better than Canvas

我需要为“标准”图表选择一个库:饼图、折线图和条形图。根据我的阅读,在我看来最好的格式是SVG/VML,例如Highcharts。SVG正在成为所有主要浏览器的标准,现在IE9接受了它。它似乎比Canvas更容易重新缩放和导出。不过,我看到有几个图表库依赖于Canvas。我错过了什么吗?对于此类应用程序,是否有任何理由考虑使用Canvas而不是SVG? 最佳答案 您通常可以使用其中任何一种获得相同的结果。两者最终都为用户在屏幕上绘制像素。主要区别在于HTML5Canvas使您可以对结果进行像素级控制(读取和写入),而SVG是一种保留

javascript - WebGL VS Canvas 二维硬件加速

最近,我需要在Canvas上绘制许多图像。Canvas大小是800x600px,我有很多256x256px的图片(有些小)可以在上面画,这些小图会在Canvas上组成一个完整的图像。我有两种方法来实现这个。首先,如果我使用Canvas2D上下文,即context=canvas.getContext('2d'),那么我可以只使用context.drawimage()方法将每个图像放在Canvas的正确位置。另一种方式,我使用WebGL在Canvas上绘制这些图像。这样,对于每个小图像,我都需要绘制一个矩形。矩形的大小与这个小图像相同。此外,矩形位于Canvas的正确位置。然后我使用图像作

javascript - ChartJS Canvas 在 IE、Safari 和 Firefox 中不显示 rgba 颜色

我正在使用ChartJS来显示一些数据,但它没有在IE、Firefox和Safari中正确呈现Canvas元素。我的猜测是背景颜色属性缺少其他浏览器使用的任何前缀,因为它在Chrome中工作正常。还有其他人遇到过这个问题吗?Chrome:Firefox、Safari和IE:代码:window.onload=function(){varctx=document.getElementById("canvas");varmyChart=newChart(ctx,{type:'line',data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Ju

javascript - D3 : Grayscale image display driven by 2D array data

有人知道如何使用d3显示灰度图像,即像素强度的二维数组吗?我似乎无法在任何地方找到它的任何例子,它会很棘手吗?任何帮助/链接/指针表示赞赏! 最佳答案 如果只想显示图像,请使用imageelement和“xlink:href”属性。例如:svg.append("image").attr("xlink:href","my.png").attr("width",960).attr("height",500);如果你想给灰度图像上色,请看这个colorizedheightmapexample它使用分位数来创建发散色标,并使用HCL插值来获

javascript - 在 Html2Canvas 中呈现时,页面滚动到顶部

我正在使用html2canvas库,使用以下代码:html2canvas(document.body,{onrendered:function(canvas){document.body.appendChild(canvas);}});当onrendered被触发时,页面会自动滚动到顶部。无论如何我们可以保持我们的滚动位置而不被自动带到页面顶部吗? 最佳答案 我查看了html2canvas.js并看到了以下行:_html2canvas.Parse=function(images,options){window.scroll(0,0)

javascript - 无法读取未定义的属性 'canvas'

我正在尝试使用chartsjs制作饼图。我已按照chartjs文档中的步骤进行操作,并且包含了chart.js和canvas元素。我添加了应该创建图表的脚本,作为chartjs文档中提供的示例。我收到以下错误:未捕获的类型错误:无法读取未定义的属性“Canvas”有谁知道如何解决这个问题?我究竟做错了什么?提前致谢!这是代码:media/js/chart.js">media/js/jquery.js">$(function(){options={//Boolean-ShowabackdroptothescalelabelscaleShowLabelBackdrop:true,//Str

javascript - paper.js 如何仅使用 javascript 设置多个 Canvas

我正在尝试在Web应用程序中使用paper.js,但我一直无法让它与多个Canvas一起使用。这就像Canvas之间的范围混淆了,所以当我打算在Canvas1上绘制时,它出现在Canvas2上。在每个View中,我都像这样初始化纸张:this.mypaper=newpaper.PaperScope();this.mypaper.setup($("myCanvasId")[0]);当我创建新的纸张对象时,我使用的应该是本地范围:varcircle=newthis.mypaper.Path.Circle(10,10,5);但是,当我在view1中创建一个圆时,它会在view2中绘制它。我读

javascript - 在 ChartJS 中 chop Canvas 标签,同时在工具提示中保留完整的标签值

我有一些带有很长标签的条形图,它们会影响图表的大小。示例:http://jsfiddle.net/norbiu/aqa8w19d/4/我试图chop显示在图表下方的标签,同时保留将鼠标悬停在栏上时显示在工具提示中的标签。问题是工具提示和Canvas标签都从数据结构中的labels数组中获取它们的值。chop该值将在两个位置显示缩短的版本。sales:ko.observable({labels:['Areallyreallylonglabel','Anotherlonglabe','Athirdlabelthatislong','Q4','Q5','Q6'],datasets:[{lab