Tag: canvas

我如何在HTML5 canvas元素上编写文本？: 是否可以在HTML5 canvas上书写文字？

使用HTML5和iPad捕获签名: 任何人都知道如何做到这一点？你会使用canvas对象，SVG，jQuery等？

检测HTML5 <canvas>的最佳方法是不受支持的: 处理浏览器不支持HTML5 <canvas>标记的情况的标准方法是embedded一些后备内容，如： <canvas>Your browser doesn't support "canvas".</canvas> 但是页面的其余部分保持不变，这可能是不恰当的或误导性的。我想要一些检测canvas不支持的方式，以便我可以相应地显示我的页面的其余部分。你会推荐什么？

jQuery等同于获取Canvas的上下文: 我有以下工作代码： ctx = document.getElementById("canvas").getContext('2d'); 有什么办法可以重新编写使用$ ？这样做失败： ctx = $("#canvas").getContext('2d');

地图拼贴algorithm: 地图我正在用Javascript制作一个基于图块的RPG游戏，使用perlin noise heightmaps，然后根据噪音的高度分配一个图块types。地图最终看起来像这样（在小地图视图）。我有一个相当简单的algorithm，它提取图像上的每个像素的颜色值，并根据其对应于平铺字典中的平铺的（0-255）之间的位置将其转换为整数（0-5）。然后这个200×200数组传递给客户端。然后，引擎根据数组中的值确定拼贴，并将其绘制到canvas上。所以，我最终会看到有趣的世界，这些世界具有逼真的外表特征：山脉，海洋等现在接下来我要做的是应用某种混合algorithm，如果邻居不是同一types的话，就会导致图块无缝融合到邻居中。上面的示例地图是玩家在小地图中看到的。在屏幕上，他们看到由白色矩形标记的部分的渲染版本; 其中瓷砖是与他们的图像，而不是单一的彩色像素呈现。这是用户在地图上看到的示例，但与上面显示的视口不同。正是在这种观点下，我希望过渡发生。 algorithm 我想出了一个简单的algorithm，它将遍历视口内的地图，并在每个图块的顶部渲染另一个图像，并将其提供给不同types的图块。（不改变地图！只是渲染一些额外的图像。）algorithm的想法是分析当前瓦片的邻居：这是引擎可能需要渲染的一个示例场景，当前的tile是用X标记的。一个3×3数组被创build，并且它周围的值被读入。所以对于这个例子，数组看起来像。 [ [1,2,2] [1,2,2] [1,1,2] ]; 然后，我的想法是为可能的瓷砖configuration制定一系列案例。在一个非常简单的层面上： if(profile[0][1] != profile[1][1]){ //draw a tile which is half sand and half transparent //Over the current tile -> profile[1][1] … } 这给出了这个结果：它从[0][1]到[1][1] ，但不是从[1][1]到[2][1]的过渡，其中硬边缘仍然存在。所以我想，在这种情况下，一个angular落瓦片将不得不被使用。我创build了两个3×3的精灵图表，我认为这些图表将会包含所有可能需要的图块组合。 […]

为什么我的球消失？: 请原谅这个有趣的标题。我创build了一个200个球弹跳和碰撞的小图示，两个都在墙上和对方。你可以看到我目前在这里： http : //www.exeneva.com/html5/multipleBallsBouncingAndColliding/ 问题是，每当他们相互碰撞，他们消失。我不知道为什么。有人可以看一看，帮助我吗？更新：显然球数组有球坐标的NaN。下面是我推球到arrays的代码。我不完全确定坐标是如何得到NaN的。 // Variables var numBalls = 200; // number of balls var maxSize = 15; var minSize = 5; var maxSpeed = maxSize + 5; var balls = new Array(); var tempBall; var tempX; var tempY; var tempSpeed; var tempAngle; var tempRadius; var tempRadians; […]

如何为网页上的文字绘制animation？: 我想有一个网页有一个中心词。我想用animation画出这个单词，这样页面就像我们想要的那样“写”出单词，即它从一个点开始，随着时间的推移画出线条和曲线，使得最终的结果是一个字形。我不关心这是用<canvas>还是DOM完成的，我不关心它是用JavaScript还是CSS完成的。没有jQuery会很好，但不是必需的。我怎样才能做到这一点？我彻底search没有运气。

你可以使用canvas对页面进行“截图”吗？: 我有一个页面，我们使用CSS来定位一堆元素，并使用JS来改变它们的“顶部和左侧”位置。我有报道说这些东西是错位的，但是用户有这个谎言来“欺骗”的动机，所以我不确定他们是否说实话。我试图找出一个方法来弄清楚他们是否在说谎，并有一些“证据”。我知道Canvas有一个方法可以从图像元素或其他canvas元素（BitBlttypes的操作）复制图像信息。用Canvas（或者其他什么，Flash，不pipe怎样）都可以用一张页面的“图片”？再次，我不是试图从一个<image> 。我试图复制用户看到的内容，这些内容由绝对定位的几个HTML元素（以及我最关心的位置）组成，并以某种方式将其上传到服务器。我知道这不能做，但也许我错过了一些东西。有任何想法吗？

Base64 png数据到html5canvas: 美好的一天程序员，我想在base64中加载一个PNG图像到canvas元素。我有这个代码： <html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0, 0); </script> </body> </html> 在Chrome 8中，我得到了这个：Uncaught TypeError：Type error 在Firefox的Firebug中：对象的types与与对象“代码：”相关联的参数的期望types不兼容在那个base64是5x5px的黑色PNG广场，我已经在GIMP和GNU / Linux的程序base64把它变成base64。非常感谢你的答案。

我想沿着特定的path做一个对象的animation: 我必须移动path上的小矩形。在canvas内单击后矩形移动。当对象跳转到所需点时，我无法制作animation。请在小提琴上find代码。 HTML <canvas id="myCanvas" width=578 height=200></canvas> CSS #myCanvas { width:578px; height:200px; border:2px thin; } JavaScript的 var myRectangle = { x: 100, y: 20, width: 25, height: 10, borderWidth: 1 }; $(document).ready(function () { $('#myCanvas').css("border", "2px solid black"); var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var cntxt = canvas.getContext('2d'); drawPath(context); drawRect(myRectangle, cntxt); […]