Tag: canvas

使用canvas连接具有相同类的元素

我正在制作一组包含数字的表格。 每个集都有一个数字，类’存在’，因为它存在于第一列。 我要做的是，使用canvas线连接每列的数字。 我设法使用offset获得他们的位置，但不知道如何实现它。 希望你能理解我。 谢谢。 样本结果 $(‘table tbody tr’).each(function(k, x) { $(this).find(‘td:first-child .rw’).each(function(t, u) { const n = $(this).text().trim(); var rw = Array.from(n.toString()).map(Number); var $this = $(this); for (var i = 0; i < n.length; i++) { var char = n.charAt(i); var d = $("table tbody tr:eq(" + k + ") td:eq(" + (i […]

动画HTML5canvas – 事件监听器不止一次触发？

所以我对javascript（以及一般的编码）非常陌生，我已经设法在Animate CC中制作了一个令人难以置信的基本HTML5canvas。 唯一的问题是，当我回到前一帧时，按钮会重复。 流程： 第1帧 – 控制台消息按钮和下一帧按钮 第2帧 – 上一帧按钮 当移回到前一帧时，按钮会触发两次（即控制台日志消息触发两次）。 如果我重复这个过程并移动到下一帧并再次返回第三次，它将触发三次。 我已经注意到这个post了： 为什么我的事件监听器不止一次触发？ 这和我遇到的问题完全相同。 但不幸的是，这个答案是针对as3而我不知道如何为javascript更改它。 我一直在努力研究几天，但我真的不明白:( 任何人都可以帮助我，或者你能指出我正确的方向来了解这一点吗？ 谢谢！ 码： 第1帧： instance = this; instance.stop(); instance.messageBTN.on(“click”, messageTest); function messageTest(){ console.log(“Button Pressed”) } instance.nextBTN.addEventListener(“click”, nextFrame); function nextFrame(){ instance.gotoAndStop(1); } 第2帧： instance = this instance.backBTN.addEventListener(“click”, previousFrame); function previousFrame(){ instance.gotoAndStop(0); } 示例文件： https ： //wetransfer.com/downloads/0eb9e342cc093fff59645626b9e2fd1e20170308205102/3bafa6

防止canvas在重绘时闪烁？

我目前正在重做这样的重绘： 这个工作正常，除了偶尔字符精灵会闪烁。 这恰好是一个非常大的烦恼。 我该如何更有效地做到这一点？ 我也试过改变重绘频率。 较高的频率加剧了问题，而较低的频率由于图形原因不够快。 init() { //stuff return setInterval(draw,100); } function draw() { drawBackground(); character.draw(); //draws a sprite } //this function is called when character is created Character.prototype.setImage = function () { this.avatar= new Image(); this.avatar.onload=function(){ this.imageLoaded=true; }; this.avatar.src=’/img/sprite.png’; } Character.prototype.draw=function(ctx) { var imageW=this.imageW; var imageH=this.imageH; ctx.drawImage(avatar,20,20,imageW,imageH); }

如何在canvas中绘制从页面加载的图像

我有一个像这样的html页面： (1) (2) 我想知道如何在canvas（1）中加载和显示图像（2）（使用drawImage函数）。 我试过这个，但它不起作用： var img = $(“#img”); ctx.drawImage(img,0,0);

将toDataUrl base64字符串转换为页面上的图像

我创建了一个自定义产品配置器，我使用html2canvas生成一个base64编码的canvas元素字符串。 如果您访问： http ： //faithpointdallas.com/ecom/page/customStole，您可以看到当您单击底部的“添加到购物车”时，它会使用html2canvas脚本来警告生成的base64编码字符串。 我的问题是：我如何获取base64编码的字符串并将其转换为常规图像标记。 喜欢 以下是生成字符串的代码： $(‘#addToCart’).click(function(event) { event.preventDefault(); var target = $(‘.customstole’); html2canvas(target, { onrendered: function(canvas) { var data = canvas.toDataURL(); alert(data); // data is the Base64-encoded image } }）; }）;

在多个canvas的无缝绘图

我正在尝试使用JS和Canvas元素制作一个简单的绘图工具。 我的问题是我希望有几个canvas，用户应该能够通过所有canvas画一条线。 这是我做的一个小页面： var act = null; var context = null; var draw = false; var c = false; function boot() { $(‘.can’) .mouseenter(function(){ act = this; context = act.getContext(‘2d’); // console.log(this); }) .mouseleave(function(){ act = null; context = null; // console.log(‘out’); }) .mousedown(function(){ draw = true; }) .mouseup(function(){ draw = false; }) .mousemove(function(ev){ // […]

如何用一个角度点改变曲线到直线两点之间的直线

我需要的 当前示例： http ： //jsfiddle.net/2ecsjomz/5/ 笔记： 特定的左/右对永远不会改变位置， “left drag”将始终保持在左侧或”right drag” 需要在两点之间形成单个角度点 从“左拖”开始的线需要是水平的 如果它有助于我不需要点可拖动，它可以有特定的坐标。 它需要在两个html元素之间生成行（与示例相同）

如何围绕徽标创建三个元素的轨道

我是新手，我正在进行第一个项目： 我有三个元素（图像）和一个标志。 当我点击图像时，这一个和另外两个应该围绕徽标在360°的轨道上移动（当它们在徽标背面时具有低z-index，因此它们可以消失然后再出现）。 这有可能与jquery和css3？

如何淡出canvas中的项目

我的页面中有一个全屏canvas。 此canvas上还有一些潜水元素。 canvas中有一个圆形元素，随着光标在页面中的任何位置移动。 但是，当光标到达canvas上的div元素时，圆形形状将保留在canvas上的最后位置，然后到达div。 演示： JSFIDDLE 当光标在div元素上方时，我可以淡出圆形，并在它返回canvas时淡入它吗？ 还有其他任何影响，而不是淡出？ 喜欢把它缩小然后淡出…… 这是与圆相关的一些代码： function writeMessage(canvas, message, x, y) { var context = canvas.getContext(‘2d’); context.clearRect(0, 0, canvas.width, canvas.height); var pattern = context.createPattern(imageResized, ‘no-repeat’);//Use imageResized, not imageObj. context.fillStyle = pattern; context.fill(); context.fillStyle = ‘black’; context.beginPath(); context.arc(x, y, 60, 0, 2 * Math.PI); }

将多个图像从工具栏拖放到canvas上

我正在创建一个应用程序，用户可以将多个对象从工具栏拖放到canvas上。将特定对象拖放到canvas上之后，用户可以在canvas中移动该对象.Double单击该对象将使其成为可能消失。我已经能够为工具栏中的一个对象实现这一点，如下面的链接所示。 http://jsfiddle.net/gkefk/26/ 要从工具栏拖放多个对象，我在函数DragDrop（）中添加了以下内容 var image2 = new Kinetic.Image({ name: data, id: “image”+(imageCount++), x: x, y: y, image2: theImage2, draggable: true }); image2.on(‘dblclick’, function() { image2.remove(); layer.draw(); }); layer.add(image2); layer.draw(); var image3 = new Kinetic.Image({ name: data, id: “image”+(imageCount++), x: x, y: y, image3: theImage3, draggable: true }); image3.on(‘dblclick’, function() { image3.remove(); layer.draw(); }); layer.add(image3); layer.draw(); […]