Tag: canvas

将图像转换为已加载的canvas: 我正在开发一个插件，我将Image转换为Canvas并存储为数据url。这个函数触发’load’事件但是如何转换已经存在于页面上的图像？（不想刷新页面或再次加载任何图像）。我尝试使用Filereader（）函数，但这也适用于’onload’概念。那么当用户点击图像时，如何将图像保存为数据url？ image.addEventListener(“load”, function () { var imgCanvas = document.createElement(“canvas”), imgContext = imgCanvas.getContext(“2d”); imgCanvas.width = image.width; imgCanvas.height = image.height; imgContext.drawImage(image, 0, 0, image.width, image.height); imgInfo = imgCanvas.toDataURL(“image/png”); localStorage.setItem(“imgInfo”, imgInfo); }, false);

JSPDF – addHTML（）多个canvas页面: 我注意到已经有一个版本“addHTML（）现在可以将canvas分成多个页面”，可以通过以下链接找到： https ： //github.com/MrRio/jsPDF/releases/tag/v1.0.138 。我可以知道它是如何工作的吗？在我的情况下，我只是在点击“另存为pdf”按钮时尝试了它，它只渲染单个页面而不是多个页面（有时没有工作，我假设因为内容太长而无法生成为pdf）。如果这个案例有一些例子，我将不胜感激。谢谢！附上我的代码如下： var pdf = new jsPDF(‘p’, ‘pt’, ‘a4’); pdf.addHTML($(“.pdf-wrapper”), function () { var string = pdf.output(‘datauristring’); pdf.save(“test.pdf”); });

管理要在HTML5 Canvas上绘制的2D数组中的文本地图: 所以，我正在制作一个HTML5 RPG，只是为了好玩。地图是（512px宽度，352px高度| 16个瓷砖，11个瓷砖从上到下）。我想知道是否有更有效的方法来绘制。这就是我现在的方式：如何在地图上加载和绘制图块使用Image()片段通过图块（32×32）绘制地图。图像文件通过一个简单的for循环加载for并使用drawImage()放入一个名为tiles[]的数组中进行PAINTED。首先，我们加载瓷砖…… 以及它是如何完成的： // SET UP THE & DRAW THE MAP TILES tiles = []; var loadedImagesCount = 0; for (x = 0; x <= NUM_OF_TILES; x++) { var imageObj = new Image(); // new instance for each image imageObj.src = "js/tiles/t" + x + […]

使用元素绘制的网格看起来拉伸: 我正在尝试在元素上绘制网格，最终目标是制作Go板。由于某种原因，网格看起来很拉伸，线条比1像素厚，间距完全错误。它甚至没有从(10,10)位置开始.. 如果有人可以看看告诉我我做错了什么会很棒。 http://jsfiddle.net/h2yJn/

碰撞检测不规则形状: 我知道如何检查一个圆是否要与一个正方形碰撞，我知道如何检测一个正方形是否要与一个正方形碰撞，但我如何检测一个多边形是否即将与一个正方形碰撞？或者更好的是，当多边形即将与多边形碰撞时。或者更好的是，当由不直的线组成的形状与另一个相似的形状，多边形或圆/矩形碰撞时是否有任何方法可以获得像素的形状可能占用的像素和另一个形状的像素将占用并检查它们中的任何一个是否相同？我希望有一些解决方案不需要大量的形状特定计算。我使用javascript和html5canvas来做到这一点。

如何在html5canvas中制作可点击的点？: 我正在玩一个简单的 HTML5canvas绘制线教程。因为它基于jQuery，所以很容易为绘图添加很多效果。如何在点击/hover（mouseenter / mouseleave）时使点可点击/可悬空以添加jquery效果？这些点是由 c.fillStyle = ‘#333’; for(var i = 0; i < data.values.length; i ++) { c.beginPath(); c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true); c.fill(); } 如何添加jquery选择器？基本上，我想在点击或hover时显示点坐标。

为什么canvas不能与jQuery选择器一起使用？: 我已经做了使用canvas的简单示例，然后我看到当我使用jQuery选择器时我的代码不起作用。例子：使用Javascript window.onload = function() { var canvas = document.getElementById(‘myCanvas’); var ctx = canvas.getContext(‘2d’); ctx.fillRect(10,50,100,200); }; JQuery的 window.onload = function() { var canvas = $(‘#myCanvas’); var ctx = canvas.getContext(‘2d’); ctx.fillRect(10,50,100,200); }; 所以我不知道为什么会这样。对它有任何限制吗？

jQuery – 使用canvas在div之间绘制线条: 我有n <div > s，每个都有<h1 >标题和<ul >项目列表。我想在canvas上浮动它们并从<div id="x" >列表项y到<div id="z" >绘制线条。我正在使用jQuery UI来使<div > s可拖动。 canvas元素位于页面的下方（文本段落和一些表单元素在它之前）但是如果需要我可以更改它。 [编辑] 我用图表标记了问题，但是让我添加这个链接： Graph_（数学） 🙂

捕获html5canvas输出为video或swf或png序列？: 我需要将HTML5canvas输出视为video或swf png序列。我在stackoverflow上找到了以下用于捕获图像的链接。将HTML Canvas捕获为gif / jpg / png / pdf？但是，任何人都可以建议我们是否希望输出为png序列的video或swf？编辑：好了，我现在明白了如何捕获canvas数据以存储在服务器上，我尝试了它，如果我只使用形状，矩形或其他图形，它工作正常，但如果我在canvas元素上绘制外部图像则不行。任何人都可以告诉我如何完全捕获canvas数据是否我们使用图形或外部图像在canvas上绘图？我使用了以下代码： var cnv = document.getElementById(“myCanvas”); var ctx = cnv.getContext(“2d”); if(ctx) { var img = new Image(); ctx.fillStyle = “rgba(255,0,0,0.5)”; ctx.fillRect(0,0,300,300); ctx.fill(); img.onload = function() { ctx.drawImage(img, 0,0); } img.src = “my external image path”; var data = cnv.toDataURL(“image/png”); } 在将canvas数据导入我的“数据”变量后，我创建了一个新的canvas并在其上绘制捕获的数据，在第二个canvas上绘制的红色矩形但外部图像没有。 […]

如何对两个部分透明的图像进行像素完美碰撞检测: 所以基本上我要这样做，当屏幕上的两个角色触摸而有人按下按钮时，它会带走他们的健康。我唯一不知道该怎么做就是如何检测它们何时接触。 $(document).ready(function(){ var canvas = document.createElement(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 1000; canvas.height = 600; document.body.appendChild(canvas); var kGroundHeight = 500; /*var upKey = 38; var downKey = 40; var leftKey = 37; var rightKey = 39; */ var render = function() { gravity(); gravity1(); context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(0,kGroundHeight,canvas.width,10); context.drawImage(kirby, kirbyObject.x, kirbyObject.y); context.drawImage(link, […]