Tag: html5 canvas

你可以使用canvas.getContext（'3d'）吗？如果是的话，怎么样？: 我阅读了HTML5中的canvas标签，总是看到getContext('2d') 。参数是'2d'，所以没有像'3d'这样的另一种可能性？而且，你怎么用这个？我之前尝试过3D，但并没有真正理解（由于没有解释的教程）。任何教程？

在canvas上绘制1px厚的线会创build2px的粗线: 在这个jsfiddle中，有一行lineWidth为1。 http://jsfiddle.net/mailrox/9bMPD/350/ 例如： ctx.lineWidth = 1; 但是，如果在canvas上绘制的线条的粗细为2px，那么您将如何创build1px的粗线条。我可以绘制一个矩形（1px高度），但是我希望线也可以在对angular线上工作。那么你如何得到这条线是1px高？谢谢！

从上下文获取canvas: 有什么办法来获得上下文的canvas？为什么我要问的是因为我正在为CanvasRenderingContext2D创build一个原型函数，其中我需要canvas元素的宽度/高度。例如： var cv = document.getElementById('canvas'); var ctx = cv.getContext('2d'); // Using only 'ctx', how to get 'cv'?

HTML5帆布摄像头/视口 – 如何行事呢？: 我确信这个问题已经解决了1000次：我有一个960 * 560的canvas和一个5000 * 3000的房间，总是只有960 * 560，这取决于玩家的位置。玩家应该总是在中间，但是在接近边界的时候应该计算出最好的视angular）。玩家可以使用WASD或箭头键完全免费。所有的物体都应该移动自己 – 而不是移动其他所有物体，而是移动玩家来创造玩家移动的幻觉。我现在发现了这两个问题： HTML5 – 创build一个视图的canvas作品，但只为这种types的游戏，我不能重现我的代码。改变一个html5canvas的视图“中心”似乎更有希望，也perfomant，但我只理解它相对于玩家正确绘制所有其他对象，而不是如何相对于播放器滚animation布视口，我想首先要实现的。我的代码（简化 – 游戏逻辑是分开的）： var canvas = document.getElementById("game"); canvas.tabIndex = 0; canvas.focus(); var cc = canvas.getContext("2d"); // Define viewports for scrolling inside the canvas /* Viewport x position */ view_xview = 0; /* Viewport y position */ view_yview = […]

Canvas上的addEventListener: 我正在尝试制作一个响应键盘和鼠标input的canvas应用程序。我有这个代码： canvas = document.getElementById('canvas'); canvas.addEventListener('mousedown', function(event) { alert('mousedown'); }, false); canvas.addEventListener('keydown', function(event) { alert('keydown'); }, false); 每当我点击鼠标，就会出现“mousedown”警报，但“keydown”警报永远不会出现。相同的代码在JS Bin中工作正常： http : //jsbin.com/uteha3/66/ 为什么它不在我的网页上工作？ canvas不能识别键盘input吗？

如何在Canvas上从HTML5 File API中绘制图像？: 我想在canvas上绘制一个用HTML5 File API打开的图像。在handleFiles(e)方法中，我可以通过e.target.files[0]访问File，但是我不能直接使用drawImage绘制图像。如何从HTML5canvas上的File API绘制图像？这是我使用的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script> window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles); } function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); ctx.drawImage(e.target.files[0], 20,20); alert('the image is drawn'); } </script> </head> <body> <h1>Test</h1> <input type="file" id="input"/> <canvas width="400" height="300" id="canvas"/> </body> </html>

Three.js检测webgl支持并回退到常规canvas: 任何使用three.js的人都可以告诉我它是否有可能检测到webgl支持，如果不存在，可以回退到标准的Canvas呈现器吗？

使用Canvas和AngularJS: 我正在执行一项任务，重新编写HTML5中的以下Flash应用程序： http://www.docircuits.com/circuit-editor 鉴于应用程序的复杂性和我的研发到目前为止，我已经确定了AngularJS作为实施的首选MVC框架。该应用程序有各种部分，如面板，菜单，属性，图表等，我相信所有这些都可以在AngularJS中轻松实现。然而，关键的问题是，组件的devise和交互（如拖放，移动，线处理等）需要基于canvas，因为我已经能够从Flash中导出所有的vectorgraphicsCreateJS工具包（ http://www.adobe.com/in/products/flash/flash-to-html5.html ）放到Canvas库中，而不是SVG。问题在于“canvas内的单个对象”和AngularJS之间没有明确的沟通方式。我已经看了下面的例子，但是几乎所有的例子都在canvas对象上工作，而不是在Canvas里面处理单个的组件： AngularJS绑定到WebGL / Canvas 那里已经有一个AngularJS的canvas绘图指令了吗？我有点卡在这里，不知道该怎么办。真的很感激一些意见： AngularJS是否是正确的select？我应该尝试在另一个库（如Fabric.js，kinect.js，Easel.js）中实现Canvas部分，并将其与Angular（它现在似乎太大任务）集成？如果以上都不是，那么我应该切换到哪个框架，轻松处理canvas以及面板，菜单，图表等其他function？

dynamic生成的图标: 是否有可能只使用JavaScript和HTMLdynamic生成一个图标，使用当前页面的图标作为背景，并在前台随机数字？例如，让我们说当前的图标看起来像这样： ====================== ====XXXXXXXXXXXXXX==== ====X================= ====X================= ====X=====XXXXXXXX==== ====X============X==== ====X============X==== ====XXXXXXXXXXXXXX==== ====================== 如果可能的话，我将如何使用JavaScript和HTML来使它看起来类似于这个： ====================== ====XXXXXXXXXXXXXX==== ====X================= ====X================= ====X=====XXXXXXXX==== ====X=========–111–= ====X=========–1-1–= ====XXXXXXXXXX—-1–= ==============–1111-= 地图： = ：白色背景 x ：原始的Favicon图像 – ：红色与一个数字生成的图像 1 ：白色文字思路：帆布？数据Uri的？

缩放图像以适应canvas: 我有一个允许用户上传图片的表单。一旦图像被加载，我们对它进行一些缩放，以减less其文件大小，然后再传回服务器。要做到这一点，我们把它放在canvas上，并在那里操作。此代码将在canvas上呈现缩放的图像，尺寸为320 x 240像素的canvas： ctx.drawImage(img, 0, 0, canvas.width, canvas.height) … canvas.width和canvas.height是基于原始图像大小的图像高度和宽度xa比例因子。但是当我去使用代码： ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height …我只能看到canvas上的部分图像，在这种情况下是左上angular。尽pipe实际图像尺寸大于320×240的canvas大小，但我仍然需要将整个图像“缩放”以适合canvas。所以对于上面的代码，宽度和高度是1142×856，因为这是最终的图像大小。我需要保持这个尺寸，以便在提交表单时传递给服务器，但只希望在用户的canvas上出现一个较小的视图。我在这里错过了什么？任何人都可以指出我正确的方向吗？提前谢谢了。