草庐IT

wxml2canvas

全部标签

javascript - 为什么 canvas2d 上下文不再填充省略号?

我正在开发一款模拟重力的javascript游戏。它使用HTML5canvas元素为行星绘制2D椭圆。我在GoogleChrome中测试我的游戏。这是游戏的链接:http://gravitygame.hostingsiteforfree.com/index.php?page=playHTML直到5月24日,它都运行良好。但是Chrome从26.0.1410.64升级到27.0.1453.94后,填充的椭圆有时画不出来。每次加载我的游戏时都不会发生这种情况,而且我在本地运行时也从未遇到过中断。这是游戏运行的屏幕截图:这是一个屏幕截图,显示它没有填充省略号:我不知道发生了什么。我将包括绘制

javascript - 使 Canvas 球平稳移动

我写了一个多人乒乓球游戏,但由于大约60毫秒的延迟,我的弹跳球移动不流畅。Thegameitselfisavailablehere,但由于它只适用于chrome,而且网站本身是用我的母语编写的(而且你显然需要两个浏览器才能让它工作),这里是问题的jsfiddle:http://jsfiddle.net/yc6Lb/75/正如您在fiddle中所见,定义了dx和dy,每秒刷新次数定义为speed。我需要这三个变量保持不变(我知道它们会导致球移动不顺畅)。现在的问题是:是否有任何技巧可以不触及这些变量,但让球看起来像在平稳移动?我正在考虑渲染球的新位置+以50%的不透明度渲染球的先前位置,

javascript - 使 Canvas 球平稳移动

我写了一个多人乒乓球游戏,但由于大约60毫秒的延迟,我的弹跳球移动不流畅。Thegameitselfisavailablehere,但由于它只适用于chrome,而且网站本身是用我的母语编写的(而且你显然需要两个浏览器才能让它工作),这里是问题的jsfiddle:http://jsfiddle.net/yc6Lb/75/正如您在fiddle中所见,定义了dx和dy,每秒刷新次数定义为speed。我需要这三个变量保持不变(我知道它们会导致球移动不顺畅)。现在的问题是:是否有任何技巧可以不触及这些变量,但让球看起来像在平稳移动?我正在考虑渲染球的新位置+以50%的不透明度渲染球的先前位置,

javascript - WebGL:有没有一种有效的方法可以只上传图像/ Canvas 的一部分作为纹理?

我正在开发一个基于2D图层的应用程序,我想使用WebGL进行合成。这些层可能会相对于彼此移动,并且每个帧只有每个层的一小部分(矩形)可能会发生变化。但是,该矩形部分的宽度和高度可能会发生不可预测的变化。我想每层使用一个Canvas(2D)和一个纹理,并且每个Canvas上的每一帧仅重绘已修改的图层部分,然后只需将该小区域上传到GPU以将相应部分更新为纹理,在GPU为我进行合成之前。但是我还没有找到一种有效的方法来将图像的一部分上传到纹理的一部分。似乎texSubImage2D()可以更新纹理的一部分,但只需要完整的图像/Canvas,而且似乎无法指定矩形区域要使用的图像。我已经想到了几

javascript - WebGL:有没有一种有效的方法可以只上传图像/ Canvas 的一部分作为纹理?

我正在开发一个基于2D图层的应用程序,我想使用WebGL进行合成。这些层可能会相对于彼此移动,并且每个帧只有每个层的一小部分(矩形)可能会发生变化。但是,该矩形部分的宽度和高度可能会发生不可预测的变化。我想每层使用一个Canvas(2D)和一个纹理,并且每个Canvas上的每一帧仅重绘已修改的图层部分,然后只需将该小区域上传到GPU以将相应部分更新为纹理,在GPU为我进行合成之前。但是我还没有找到一种有效的方法来将图像的一部分上传到纹理的一部分。似乎texSubImage2D()可以更新纹理的一部分,但只需要完整的图像/Canvas,而且似乎无法指定矩形区域要使用的图像。我已经想到了几

javascript - Canvas.toDataURL() 返回一个没有扩展名的文件

单击保存按钮时,我正在将HTMLCanvas转换为jpg。我使用下面的代码:$('#save').click(function(e){varcanvas=$('#myCanvas')[0];varimage=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");window.location.href=image;//itwillsavelocally});不幸的是,我下载的文件没有任何扩展名。我想要的是当我点击下载按钮时,浏览器必须从页面下载带有文件扩展名的文件。谢谢

javascript - Canvas.toDataURL() 返回一个没有扩展名的文件

单击保存按钮时,我正在将HTMLCanvas转换为jpg。我使用下面的代码:$('#save').click(function(e){varcanvas=$('#myCanvas')[0];varimage=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");window.location.href=image;//itwillsavelocally});不幸的是,我下载的文件没有任何扩展名。我想要的是当我点击下载按钮时,浏览器必须从页面下载带有文件扩展名的文件。谢谢

javascript - Canvas 粒子、碰撞和性能

我正在创建一个网络应用程序,该应用程序具有交互式背景,粒子会四处弹跳。在任何时候,屏幕上都有大约200个圆形粒子,最多大约800个粒子。为粒子运行的一些碰撞和效果是以下原型(prototype)。我想知道是否可以通过使用WebWorker进行这些计算来提高性能?/***Particles*/Jarvis.prototype.genForegroundParticles=function(options,count){count=count||this.logoParticlesNum;for(vari=0;i1){particle.vx-=0.05;}elseif(particle.v

javascript - Canvas 粒子、碰撞和性能

我正在创建一个网络应用程序,该应用程序具有交互式背景,粒子会四处弹跳。在任何时候,屏幕上都有大约200个圆形粒子,最多大约800个粒子。为粒子运行的一些碰撞和效果是以下原型(prototype)。我想知道是否可以通过使用WebWorker进行这些计算来提高性能?/***Particles*/Jarvis.prototype.genForegroundParticles=function(options,count){count=count||this.logoParticlesNum;for(vari=0;i1){particle.vx-=0.05;}elseif(particle.v

javascript - 鼠标在 HTML 5 响应式 Canvas 中的位置

我搜索了其他问题,但没有一个适合我的情况。我有一个Canvas元素:我得到了这个函数的位置:linearSynopticCtrl.getPositionFromEvent=function(event){varrect=linearSynopticCtrl.canvas.getBoundingClientRect();varx=event.x-rect.left;vary=event.y-rect.top;returnnewPoint(x,y);};问题是Canvas需要响应,所以我添加了以下css规则:canvas#linear-synoptic-map{width:100%;}当发