HTML5 canvas图像问题(HTML5 canvas Image issue)
我用HTML5制作游戏,这张图片不会画。 在chrome js控制台中,它说它没有任何问题。
声明图像:
var wall1 = new Image();
调用onload:
function render(arg1, arg2, arg3){ wall1.onload = drawwall(arg1, arg2, arg3); wall1.src = "assets/slide.jpg"; }
画墙功能:
function drawwall(numb, dist, hm){ ctx.drawImage(wall1,numb*4,4,4,height[hm]*3/dist,numb*4,1,4,height[hm]*3/dist); }
我试过
return ctx.drawImage(...
并return Function(){ctx.drawImage(...
但它仍然无法正常工作。I making a game in HTML5 and this image wont draw. In the chrome js console it says there's nothing wrong with it.
Declaring the image:
var wall1 = new Image();
calling the onload:
function render(arg1, arg2, arg3){ wall1.onload = drawwall(arg1, arg2, arg3); wall1.src = "assets/slide.jpg"; }
Draw wall function:
function drawwall(numb, dist, hm){ ctx.drawImage(wall1,numb*4,4,4,height[hm]*3/dist,numb*4,1,4,height[hm]*3/dist); }
I've tried
return ctx.drawImage(...
andreturn Function(){ctx.drawImage(...
but it still wont work.
原文:https://stackoverflow.com/questions/29927033
最满意答案
JSON中的日期实际上并不是Javascript可以以合理的方式处理的事情 - 您需要将其解析为日期对象。 d3为此提供了各种功能(参见文档 )。 在你的情况下,你需要类似的东西
var parseDate = d3.time.format("%Y-%m-%d").parse; ... .domain(d3.extent(data, function(d) { return parseDate(d.date); })) ... .x(function(d) { return x(parseDate(d.date)); })
The date in your JSON is not actually something that Javascript can deal with in a sensible way -- you need to parse it into date objects. d3 provides various functions for this (see the documentation). In your case, you'll need something like
var parseDate = d3.time.format("%Y-%m-%d").parse; ... .domain(d3.extent(data, function(d) { return parseDate(d.date); })) ... .x(function(d) { return x(parseDate(d.date)); })
相关问答
更多-
当你写作 .on("mousemove", mousemove()); 它立即调用mousemove函数并将其返回值作为侦听器函数传递给"mousemove"事件。 因为你没有正确设置this就是为什么d3.mouse(this)返回null 。 修复非常简单:只需将您的mousemove函数作为参考传递,不要调用它: .on("mousemove", mousemove); 然而,即使在此修复之后,您仍然会在小提琴中出现错误,因为缺少bisectDate函数... When you write .on ...
-
d3js时间格式(d3js time format)[2022-06-03]
JSON中的日期实际上并不是Javascript可以以合理的方式处理的事情 - 您需要将其解析为日期对象。 d3为此提供了各种功能(参见文档 )。 在你的情况下,你需要类似的东西 var parseDate = d3.time.format("%Y-%m-%d").parse; ... .domain(d3.extent(data, function(d) { return parseDate(d.date); })) ... .x(function(d) { return x(parseDate(d.da ... -
D3JS使日期重复(D3JS makes date duplicates)[2022-06-11]
这是困扰很多D3新手的人:轴上的刻度,特别是在使用时标时,会自动生成。 在您的情况下,根据您域中的日期间隔,它恰巧最终会为每天创建两个刻度。 但请注意:这些刻度表示同一天的不同时间(小时)(如果删除轴生成器中的tickFormat ,则可以看到)。 让我们看看你的代码生成x轴: var svg = d3.select("svg"); var data = d3.csvParse(d3.select("#csv").text()); var parseTime = d3.timeParse("%Y-%m- ... -
你看过Thinking With Joins吗? 它非常清楚地解释了数据如何工作 - 实质上,在D3中,您使用.selectAll()将数据连接到选择,然后使用.enter()根据需要附加新元素。 所以 svg.selectAll("rect.day") .data( ... ) .enter().append("rect") .class("day") 根据数据,根据需要创建新的rect元素。 Have you looked at Thinking With Joins? It ex ...
-
至少有两种方法可以实现这一目标。 在点之间插入d属性。 这使您可以更好地控制每个线段。 插值stroke-dashoffset具有绘制线条的外观。 这提供了更好,更流畅的视觉体验 此codepen演示了两种方法之间的区别。 方法1:使用d属性 第一种方法将按顺序添加每一行和点,为您提供选项,以提供涉及点本身的转换。 您希望首先将数据的第一个点传递给d属性,如下所示: selection.attr('d', lineData[0]) 。 然后调用转换并使用attrTween并声明补间函数: selection ...
-
删除JS对象的JSON.parse并将memberAverageLoadAverage更改为不是全部是相同的值后,我能够显示图形。 我需要更改memberAverageLoadAverage值的原因是, extent调用使y轴从20变为20,因此该线位于屏幕的底部并与x轴线相撞。 我建议将y.domain设置为[0, d3.max(...)]而不是使用d3.extent 。 var margin = {top: 20, right: 20, bottom: 30, left: 50}, width ...
-
d3js线条图的平滑线条(d3js Smooth lines for linechart)[2023-03-22]
在CSS中你有shape-rendering: crispEdges应用于整个图表,它禁止对其中的所有内容进行消除锯齿,包括路径。 您很可能只想禁用图表轴的抗锯齿,因此您应该使规则更具选择性。 即: .chart .axis { shape-rendering: crispEdges } in the CSS you have shape-rendering: crispEdges applied to the entire chart, which is disabling anti-aliasin ... -
尝试使用ticks()函数调整刻度数,如果不能产生所需的结果,请尝试使用tickValues()显式设置刻度值。 Try adjusting the number of ticks with the ticks() function or, if that doesn't produce the desired result, try setting the tick values explicitly with tickValues().
-
在d3js中调整时间刻度(Adjust time scale in d3js)[2022-08-30]
如果你要评论这一行(小提琴中的第63行): x.domain(d3.extent(data, function(d) { return d.date; })); 您的代码将按预期工作。 当您从数据中获取minDate的偏移量时,您做得正确,但稍后您已使用数据中的精确最小值和最大值覆盖了x.domain 。 If you'll comment this line (nr 63 in your fiddle): x.domain(d3.extent(data, function(d) { return d.da ... -
查看d3更新模式https://bl.ocks.org/mbostock/3808218 您需要将具有属性.data()路径追加到数据绑定代码中,并将其添加到您可以在数据更新时调用的函数中。 另请查看http://www.toptal.com/d3-js/towards-reusable-d3-js-charts这是构建d3图表的好方法 Look into the d3 update pattern https://bl.ocks.org/mbostock/3808218 You need to separ ...