Tag: canvas

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吗？

在HTML5canvas中“擦除”: 我在html5canvas上有一个涂鸦应用程序，我试图找出实现橡皮擦控制的最佳方法。第一个冲动就是让橡皮擦画出背景颜色[白色]，但这是有问题的，因为如果用户将图像或其他图层移动到先前擦除的位置，他们会看到白色的图像被擦除。理想情况下，我想要擦除控制将像素更改为黑色透明。我不能简单地使用lineTo来做到这一点，因为很明显，它只是画一条黑色的透明线条，而不会改变原来的涂鸦。任何想法如何做到这一点？谢谢。

如何使用PIL / Pillow将图像合并到canvas中？: 我对PIL不熟悉，但是我知道在ImageMagick中将一大堆图像放到一个网格中是非常容易的。例如，我如何将16个图像放入一个4×4的网格中，我可以指定行和列之间的空隙？

HTML5的canvas元素上的子像素反锯齿文本: 我有点困惑的方式canvas元素反别名文本，并希望你们都可以帮助。在下面的截图中，顶部的“快速布朗福克斯”是一个H1元素，最下面的是一个canvas元素，在其上面呈现文字。在底部，您可以看到两个并排放大的“F”。注意H1元素如何与背景融合得更好：这里是我用来渲染canvas文本的代码： var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = 'black'; ctx.font = '26px Arial'; ctx.fillText('Quick Brown Fox', 0, 26); } 是否可以在canvas上呈现文本，使其看起来与H1元素相同？他们为什么不同？

使用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？

我可以从canvas元素获取图像，并在img src标签中使用它？: 有没有可能将图像转换成由img src表示的图像？我需要在一些转换之后裁剪图像并保存。有一个视图函数，我在互联网上find像： FileReader()或ToBlop() ， toDataURL() ， getImageData() ，但我不知道如何在JavaScript中正确实现和使用它们。这是我的html： <img src="http://picture.jpg" id="picture" style="display:none"/> <tr> <td> <canvas id="transform_image"></canvas> </td> </tr> <tr> <td> <div id="image_for_crop">image from canvas</div> </td> </tr> 在JavaScript中，它应该看起来像这样： $(document).ready(function() { img = document.getElementById('picture'); canvas = document.getElementById('transform_image'); if(!canvas || !canvas.getContext){ canvas.parentNode.removeChild(canvas); } else { img.style.position = 'absolute'; } transformImg(90); ShowImg(imgFile); } function transformImg(degree) { […]

HTML5canvas到PNG文件: 我试图将HTML5canvas转换为图像。这是我到目前为止： var tmp_canvas = document.getElementById('canvas'); var dataURL = tmp_canvas.toDataURL("image/png"); $('#thumbnail_list').append($('<img/>', { src : dataURL }).addClass('image')); 但问题是，我得到这个代码： <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt+XCAAAgAElEQVR4nNS6Z1xVaZbvv/c+CVOZc6mYEMlJMZRizgljGRARs6AgOSMGQATBSM5ZyTkoOQkSzJWrp3t6etLt6Z7pmf/c++L7f3EOiBZW2dM9dz73xfdzztl7n3Oe/Txrrd9a69mCTC4gkwvIZAKSTECUBARRQBA+jii+46f…….class="image"> 我想要一个正常的图像path，用户可以下载！任何帮助？

缩放图像以适应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上出现一个较小的视图。我在这里错过了什么？任何人都可以指出我正确的方向吗？提前谢谢了。

HTML5 Canvas性能和优化技巧，技巧和编码最佳实践: 你知道一些帆布的最佳实践吗？请添加到这个线程你知道，已经学到，或已经在线阅读了任何和所有的帆布最佳实践，性能提示/技巧由于canvas对于互联网来说还是一个新的东西，而且没有迹象显示它将来会变老，所以并没有太多记载的“最佳实践”或其他非常重要的提示，这些提示是“必须知道的”它在任何一个特定的地方。像这样的东西散落在许多不为人知的地方。人们需要了解的东西太多了，而且还要学习太多东西。我想分享一些东西来帮助那些正在学习Canvas的人，也许一些人已经很了解它，并希望从别人那里得到一些他们觉得是一些最佳实践的反馈，或者在HTML5中使用Canvas的其他技巧和窍门。我想从一个我个人发现对开发人员来说相当有用但出人意料的事情开始。 1.缩进你的代码就像你在其他任何时候一样，用任何其他语言，无论这种情况如何。对于其他任何事情来说，这都是最佳实践，而且我发现，在复杂的canvas应用程序中，在处理几个不同的上下文和保存/恢复状态时，可能会有些混乱。更不用说代码只是更可读，整体更清洁。例如： … // Try to tell me this doesn't make sense to do ctx.fillStyle = 'red'; ctx.fill(); ctx.save(); if (thing < 3) { // indenting ctx.beginPath(); ctx.arc(2, 6, 11, 0, Math.PI*2, true); ctx.closePath(); ctx.beginPath(); ctx.moveTo(20, 40); ctx.lineTo(10, 200); ctx.moveTo(20, 40); ctx.lineTo(100, 40); ctx.closePath(); ctx.save(); […]

二维引擎的Javascript: 我正在尝试使用HTML5canvas在JavaScript中构build基于图块的游戏。有许多可供select的引擎，例如： JawsJS GameJS 的Cocos2D MelonJS CraftyJS ImpactJS （商业） … 这样的例子不胜枚举。然而，在所有这些不同的实现中似乎并没有一个事实上的标准。基本上我正在寻找JavaScript游戏引擎的“jQuery”。一个由（更大的）社区支持的，具有优秀的文档并得到积极维护。其中大部分对我来说似乎是一个人的项目。把这个成为一个真正的问题; JavaScript中2D游戏引擎的事实标准是什么？此外，我会非常感兴趣的实际实施（演示pong / pacman游戏除外）的经验。