首页 \ 问答 \ HTML5 canvas图像问题(HTML5 canvas Image issue)

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(... and return Function(){ctx.drawImage(... but it still wont work.


原文:https://stackoverflow.com/questions/29927033
更新时间:2023-04-07 22:04

最满意答案

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 ...
  • 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 ...
  • 这是困扰很多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 ...
  • 在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().
  • 如果你要评论这一行(小提琴中的第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 ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)