Tag: canvas

Arbor Js – 节点Onclick？: 我正在使用arbor.js来创建图表。如何为节点创建onclick事件，或在单击时在某处创建节点链接？ Arborjs.org主页有节点，点击后链接到外部页面，如何复制，或点击节点调用javascript函数？我当前的节点和边缘列表采用以下格式： var data = { nodes:{ threadstarter:{‘color’:’red’,’shape’:’dot’,’label’:’Animals’}, reply1:{‘color’:’green’,’shape’:’dot’,’label’:’dog’}, reply2:{‘color’:’blue’,’shape’:’dot’,’label’:’cat’} }, edges:{ threadstarter:{ reply1:{}, reply2:{} } } }; sys.graft(data); 一点上下文：我正在使用arbor.js在我的论坛上创建一个线程启动器和回复的图表。我已经让它工作，以便id在各自的线程启动器周围显示“在轨道上”。乔木网站上的参考实际上并没有太大帮助。任何帮助深表感谢。

在canvas中更改颜色图像: 我想在canvas中更改图像的颜色这是图像你可以看到有一个透明的图像我尝试使用PutImgData但我的透明颜色正在改变是否有改变颜色的汽车和金钱？我使用的是这段代码： var canvas = document.getElementById(“canvas”), ctx = canvas.getContext(“2d”), image = document.getElementById(“testImage”); canvas.height = canvas.width = 100; ctx.fillStyle = ‘red’; ctx.fillRect(10,10,20,10); ctx.drawImage(image,0,0); var imgd = ctx.getImageData(0, 0, 45, 45), pix = imgd.data; for (var i = 0, n = pix.length; i <n; i += 4) { if(pix[i+3]==0) {continue;} pix.length[i]=r|pix.length[i]; pix.length[i+1]=g|pix.length[i+1]; pix.length[i+2]=b|pix.length[i+2]; pix[i + […]

图像调整canvas大小: 我正在尝试上传图片，让它们适合不同大小的盒子….让你了解应用程序的作用：人们上传图像并将它们打印到海报上。例如，我们的海报尺寸为8“x 10”（实时区域），完整尺寸为9.5“x 11.5”，因为最小DPI为100，我们通常将8×10乘以100 = 800×1000。这是一张图片，说明我有一张原始图片（ http://i.imgur.com/Uds9rcZ.jpg ），需要根据不同尺寸进行调整。我可能需要澄清一下，如果需要，请提出问题。谢谢。

如何将回调函数发送回主函数: 我有这个小提琴http://jsfiddle.net/jdsans/38GFS/我试图锻炼，但我无法将回调函数的返回发送到主函数。回调函数包含我想要的结束返回值，但它不返回。当我使用document.write（）函数打印返回值时，我得到了我想要的确切值，但正如我之前所说，它不会被返回。任何人都可以用这个小提琴来向我展示一个有效的例子。我在小提琴中添加了更多细节作为评论，以便您在理解我时没有任何问题。

使用javascript将具有多个图像的html div转换为单个图像: 我正在尝试将DIV转换为单个图像。 div中有4个图像。我找到了“htmltocanvas”的js，但是这个jquery插件不会创建div中存在的所有图像的图像。这是div代码，其中包含图像并需要转换为图像。我也试过下面的javascript代码，但无法取得成功。 var htmlcontent = $(“#myJershy”).html(); var canvas = document.createElement(“canvas”); var ctx = canvas.getContext(“2d”); var data = “” + “” + “” + htmlcontent+ “” + “” + “”; var DOMURL = self.URL || self.webkitURL || self; var img = new Image(); var svg = new Blob([data], {type: “image/svg+xml;charset=utf-8”}); var url = […]

鼠标在HTMLcanvas中移动时图像闪烁: 我已经看过这些线程1和线程2 ，但是当鼠标移动时我仍然闪烁。我的代码： function draw(){ var img = new Image(); img.src = “/Sample/Icons/sample.png”; img.onload = function () { ctx.drawImage(img, X1, Y1, 25, 25); }; } 希望有人可以给我一个关于如何解决我的闪烁问题的想法或解决方案。

失败的Canvas 360 jquery插件: 这跟我来的差不多.. 但是在加载图像时它会破碎 – 只有第二个canvas才会渲染？问题似乎发生在img.load回调期间 https://jsfiddle.net/7a4738jo/24/ HTML .. 1 2 JS … (function ($) { var defaults = { string1: “hello “, string2: “world!” }; var methods = { init: function (options) { if (options) { $.extend(defaults, options); } //console.log(“defaults”, defaults); methods.start(this); //console.log(defaults.string1 + defaults.string2); }, test: function (arg) { console.log(“test: ” + arg.args); console.log(“args: […]

关于类的HTML5 canvas jQuery getContext: 此代码有效： var canvas = document.getElementById(‘myCanvas’); var context = canvas.getContext(‘2d’); context.beginPath(); context.moveTo(0, 200); context.lineTo(578, 0); context.stroke(); context.beginPath(); context.moveTo(0, 0); context.lineTo(578, 200); context.stroke(); 我试图在jQuery中做同样的事情，但是没有用： “ Object [object Object]没有方法’getContext’ ” var context = $(‘.dropzone’).getContext(‘2d’); context.beginPath(); context.moveTo(0, 200); context.lineTo(578, 0); context.stroke(); context.beginPath(); context.moveTo(0, 0); context.lineTo(578, 200); context.stroke(); 我甚至读过stackoverflow，我应该尝试这个（这不起作用）在代码中添加了[0] 。 “ 对象＃没有方法’getContext’ ” var context = $(‘.dropzone’)[0].getContext(‘2d’); 题我想在每个.dropzone中“画画”。 […]

如何使用Fabric.js自由绘制圆圈？: 我正在使用FabricJS在canvas上绘制圆圈： var circle = new fabric.Circle({radius: 100, fill: ”, stroke: ‘red’, strokeWidth: 3, originX: ‘center’, originY: ‘center’ }); var text = new fabric.Text(‘HELLO WORLD.’, { fontSize: 30, originX: ‘center’, originY: ‘center’, fill : ‘red’ }); var group = new fabric.Group([ circle, text ], { left: 150, top: 100 }); canvas.add(group); 此代码绘制一个普通圆，但我需要用鼠标自由绘制圆。任何代码帮助将不胜感激。

检测canvas边框上的碰撞: 我正在和我的朋友们进行一场小游戏，但是当我碰到canvas的墙壁时，我正试图检测碰撞，我让它发挥作用，但是当我撞到墙壁时，我的角色卡住了……我不知道如何找到让他再次行动的方法。你认为你们中的任何人都可以帮助我解决这个问题。谢谢大家的帮助！ Javascript / jQuery： function Player() { this.w = 50; this.h = 60; this.x = (cW / 2) – (this.w / 2); this.y = (cH / 2) – (this.h / 2); this.name = username.value; this.nw = ctx.measureText(this.name).width; // username.clientWidth + 1; this.src = playerImage; this.dx = 0; this.dy = 0; this.render = function() […]