Tag: canvas

为什么我在这个canvas上创建的矩形没有被放到正确的位置？

我正在尝试创建一个单击的简单页面，并可以在canvas上创建矩形。 它将用户的鼠标单击作为输入，然后从单击的x和y创建一个矩形。 但是，它将矩形放在一边一定量，我不知道为什么。 小提琴： https ： //jsfiddle.net/2717s53h/ HTML CSS #cnv{ width:99vw; height:98vh; background-color:#faefbd; } JAVASCRIPT $(function () { var canvas = $(‘#cnv’); var canvObj = document.getElementById(‘cnv’); var ctx = canvObj.getContext(‘2d’); var point1 = {}; var point2 = {}; canvas.click(function (e) { console.log(e); var x = e.pageX; var y = e.pageY; console.log(x); console.log(y); if (Object.keys(point1).length == […]

使用KineticJS在鼠标hover时重新塑造形状

我有一个帆布，可容纳中等到大量的形状（50-500）。 我成功地使用这些工具绘制了我想要的形状轮廓： function DrawPolygon(diagramLayer, polygon) { var diagramImage = new Kinetic.Shape(function () { var context = this.getContext(); context.beginPath(); context.lineWidth = 1; context.strokeStyle = “#ff0000”; var lastVertice = polygon.Vertices[polygon.Vertices.length – 1]; context.moveTo(lastVertice.X, lastVertice.Y); for (var i = 0; i < polygon.Vertices.length; i++) { var vertice = polygon.Vertices[i]; context.lineTo(vertice.X, vertice.Y); } context.stroke(); context.closePath(); }); diagramImage.on("mouseover", function () […]

将Raphael JS在canvas中生成的SVG另存为png的问题

我正在尝试转换由Raphael JS （和用户，因为您可以拖动和旋转图像）生成的SVG。 我在浏览器中跟踪了这个转换SVG图像（JPEG，PNG等），但仍然无法获得它。 它一定很容易，但我不能指责我错了。 我把我的svg放在一个div中， #ec为id ，canvas的是#canvas 。 function saveDaPicture(){ var img = document.getElementById(‘canvas’).toDataURL(“image/png”); $(‘body’).append(”); } $(‘#save’).click(function(){ var svg = $(‘#ec’).html(); alert(svg); canvg(‘canvas’, svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true}); }); 警报给了我： Created with Raphael 这是svg的xml，如果我相信canvg文档 ，那就好了。 无论如何，使用此代码，变量img （应该具有转换后的图像数据）获得具有svg维度的空png的数据。 我猜的唯一一件事就是Raphael JS生成的svg没有很好地形成canvg（比如，如果我按照W3C的推荐 ， image href应该是xlink:href ） 有人对这个问题有所了解吗？ ：d

删除上一个笔划（创建一个临时行） – Javascript / HTML5

我正在尝试制作一个简单的绘图应用程序，并且我希望在指定行起点后行可以预览行。 相应的javascript是这样的： var Edges = new Array(); var Vertecies = new Array(); var Mouse = {x:0, y:0} function findPos(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined; } function […]

如何在html 5中销毁/重新加载canvas？

我正在开发一个电子书应用程序，我使用PDF.js在canvas上绘制每个页面，问题是，当我点击按钮并转到其他页面时，我尝试再次在同一个canvas上渲染，但canvas似乎移动了到错误的位置或错误的大小。 function renderPage(url) { canvas = document.getElementById(‘canvas’); ctx = canvas.getContext(‘2d’); //clearCanvasGrid(‘canvas’); PDFJS.getDocument(url).then(function (pdf) { // Using promise to fetch the page pdf.getPage(1).then(function(page) { var viewport = page.getViewport(5); //scale 5 canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: ctx, viewport: viewport }; page.render(renderContext).then(function() { initialZoomPage(viewport.height,viewport.width); }); […]

全屏响应三角形图案

最近我在移动用户体验设计中挖掘了一些，我找到了一个关于1手/拇指选择的有趣话题。 主要思想是你有两个可以用拇指点击的三角形区域。 我确实试图通过CSS或jQuery找到一个解决方案来创建2个可点击/触摸的三角形区域，但是我失败了。 我试过了： – 图标字体 – svgs（这不起作用，因为svgs仍然是矩形的） – 带有边框形状为三角形的div – 帆布（没有那么好用） – ASCII字体 – jQuery，在这方面没有什么用处：/ – 旋转div（CSS变换） 您是否有任何关于如何实现适合屏幕的响应三角形的建议，如此屏幕中不重叠，可在DOM中单击和访问？ UI的主要观点是用户需要这样看到点击/可触摸区域（视觉上）以确定交互的可能性。 获得点击区域（以三角形样式）很可能不是问题。 但是，向用户显示他们需要在某个区域进行交互是关键。 我不想要缩放或不同版本的图片！ 我喜欢看CSS或JavaScript解决方案…… 我想最大的问题是三角形不成比例+响应性 这张照片应该说明这个想法： 响应三角形http://sofzh.miximages.com/jquery/7q8q4nha.jpg

FabricJS对象与canvas不相关resize

我正在使用FabricJS创建全屏canvas并保存更改服务器端。 在加载它之前，我调整了canvas和背景的大小，以便在每个页面加载时，canvas都适合用户窗口。 canvas.setHeight($(window).height()); canvas.setWidth($(window).width()); canvas.backgroundImage.width = $(window).width(); canvas.backgroundImage.height = $(window).height(); 问题是canvas和背景得到调整但不是对象。 它们相对于屏幕保持相同的位置，并且不会改变尺寸，因此在其他屏幕尺寸上是不相同的。 怎样才能解决这个问题？

javascript将图像裁剪为canvas

我想基于特定区域裁剪图像，下面的示例如何裁剪图像，使其成为蓝线内的东西（像素，数据……），并删除框外的东西（像素，数据……）？ 下面的代码就是我试过的，在canvas后绘制新图像，不正确的区域我想要的，我是否会错过一些东西，如何解决？ 任何建议将不胜感激。 请不要提供插件作为答案，而css crop不是我想要的。 UPDATE https://jsfiddle.net/xqpdtq76/我更新小提琴和下面的代码，图像naturalWidth与css宽度不同，所以我需要转换裁剪x，y，宽度，高度（sx，sy，sw，sh）以适应自然图像大小和裁剪图像。 结果似乎裁剪正确的区域，但图像不正确的比例..我不明白为什么 var crop = function() { var transformMediaBlock = $(‘.mediaBlock’); var transformCropInner = $(‘.transformCropInner’); var transformCropLimit = $(‘.transformCropLimit’); var canvasContainer = $(‘.canvasContainer’) var canvasWidth = $(transformCropLimit).width(); var canvasHeight = $(transformCropLimit).height(); var canvas = $(”,{‘class’:”}).width(canvasWidth).height(canvasHeight); canvas = canvas.appendTo($(canvasContainer)); var ctx = canvas[0].getContext(‘2d’); var limitLeft = transformCropLimit.offset().left; var limitTop = […]

通过电子邮件在HTML5canvas上创建的图像

我有一个canvas，用户可以进行交互以对设计进行更改。 现在用户完成更改后，他可以提交他的设计以及他的电子邮件ID。 但是提交设计我正在使用http://www.nihilogic.dk/labs/canvas2image/将canvas转换为图像 现在我想将此图像与用户的电子邮件ID一起发送。 如何直接发送此图像而不让用户将其保存在本地系统上。

裁剪图像绘制到canvas与JCrop

我是HTML5的新手，并尝试使用JCrop裁剪图像。 如果我想直接裁剪它没有问题但是当它被绘制到canvas时JCrop不起作用。 我想原因可能是我正在创建一个图像变量，以便能够将其绘制到视口canvas并动态设置它的Id。 因此Jquery无法访问动态创建的图像。 但即便如此，我也不知道该怎么做。 这是我的完整HTML代码。 acanimal – Crop image on the client side with JCrop and HTML5 canvas element $(window).load(function () { var canvas = document.getElementById(‘viewport’), context = canvas.getContext(‘2d’); make_base(); function make_base() { var base_image = new Image(); base_image.id = ‘target’; base_image.src = ‘demo_files/sago.jpg’; base_image.onload = function () { context.drawImage(base_image, 0, 0); } } […]