Tag: canvas

HTML 5 Canvas似乎重绘了已删除的部分: 我在jsfiddle上创建了以下代码。目标是在单击canvas后从canvas中删除它。实际发生的是网格被清除并完全重新绘制，其中包含已删除的旧框。当所有给定对象都被删除时，网格只会显示为空…我很困惑！我究竟做错了什么？ jQuery(function(){ GridBox = new GridBox(); GridBox.init(); var canvas = GridBox.canvas; canvas.on( ‘click’, GridBox.clickHandler ); }); function GridBox() { this.target = { x: 0, y: 0 }; this.current = { x: 0, y: 0 }; this.boxHeight = 50; this.boxWidth = 50; this.width = 500; this.height = 500; this.context = null; this.canvas […]

即时下载canvas图像: 我有然后jquery.qrcode.js plugin creates over a使用QR代码jquery.qrcode.js plugin creates over a `元素。所以，我想在页面中放一个元素，用于下载动态创建的“图像”（它是一个canvas元素）。有可能吗？

椭圆弧箭头边缘d3强制布局: 我正在使用强制布局来创建有向图。它在canvas上呈现。我的示例示例位于http://jsbin.com/vuyapibaqa/1/edit?html,output 现在我受到了启发 https://bl.ocks.org/mattkohl/146d301c0fc20d89d85880df537de7b0#index.html d3 svg中的资源很少，我试图在canvas中使用类似的东西。 http://jsfiddle.net/zhanghuancs/a2QpA/ http://bl.ocks.org/mbostock/1153292 https://bl.ocks.org/ramtob/3658a11845a89c4742d62d32afce3160 http://bl.ocks.org/thomasdobber/9b78824119136778052f64a967c070e0 使用d3在两个节点之间绘制多条边。想要用箭头添加椭圆弧连接边。如何在canvas中实现这一点。我的代码： Sample Graph Rendring Using Canvas var graph = {}//randomgraph.WattsStrogatz.beta(15, 4, 0.06); graph.nodes = [{“label”:”x”} , {“label”:”y”}]; graph.edges = [{source:0,target:1},{source:0,target:1}, {source:1,target:0}] var canvas = null var width = window.innerWidth, height = window.innerHeight; canvas = d3.select(“body”).append(“canvas”).attr(“width”,width).attr(“height”,height); var context = canvas.node().getContext(“2d”); force […]

如何在canvas对象上使用jquery ui draggable方法？: 我试图让用户能够使用draggable方法在canvas元素周围移动一个矩形。这是我最初的想法，但它不起作用。我在http://jsfiddle.net/r2Zbe/设置了一个小提琴 $(“button”).click(function () { var door = bgContext.strokeRect(20, 20, 50, 150); door.draggable(); });

如何在charts.js中旋转饼图？: 看起来像charts.js的饼图是通过在圆圈的上半部分采用垂直半径，然后从那里顺时针移动来绘制的。这在大多数情况下效果很好，但是对于只有2个类别的饼图，如果它可以旋转以使切片居中，那将会很好，如下所示：旋转的计算方法是将360的百分比除以2. (.14*360)/2 = 25.2度，如果我可以申请 transform: rotate(-25.2deg); 到圆圈我会很好。由于charts.js将它放在canvas上（而不是），我不知道如何对它应用任何转换。不确定是否相关，但这是我的图表代码： HTML JS openRate = [ { value: 488, color: “#FF9030”, highlight: “rgba(255, 144, 48, 0.44)”, }, { value: 3475, color: “#008DB7”, highlight: “rgba(0, 141, 183, 0.82)” } ]; var ctx=document.getElementById(‘canvas’).getContext(“2d”); var chart=new Chart(ctx).Pie(openRate); 还有一个小提琴： http ： //jsfiddle.net/msy6kf3a/

有没有办法用jQuery检测canvas线？: 我试图找出如何检测用户的鼠标是否使用jQuery在HTML 5canvas上命中一行。以下是生成canvas线的代码： Your browser does not support the canvas element. window.onload = function(){ var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); ctx.moveTo(40,0); ctx.lineTo(40,360); ctx.stroke(); ctx.moveTo(80,400); ctx.lineTo(80,40); ctx.stroke(); ctx.moveTo(120,0); ctx.lineTo(120,360); ctx.stroke(); ctx.moveTo(160,400); ctx.lineTo(160,40); ctx.stroke(); }; 我正在使用一个修改过的jQuery脚本，我实际上在这里找到了另一个问题，但现在我无法弄清楚如何在canvas中检测线条，主要是颜色从白色到黑色的差异。我知道这可以通过图像来完成，但我没有见过像这样的人。我想我真正的问题是，有没有办法用jQuery检测canvas元素的颜色变化？

使用drawImage进行裁剪不适用于Safari: 我正在使用canvas进行一些简单的图像处理function。用户上传图像，能够旋转并裁剪图像，然后单击确定。然后将图像分成两半，每半部分被镜像到两个canvas元素，如下所示：原版的镜像这一切都适用于Chrome，Firefox，IE和Android设备。 Safari虽然不会很好玩。除分割function外，所有图像处理都能正常工作。它确实绘制了一个canvas元素，但另一个只是黑色。我已经尝试过更改drawImage代码，但我无法让它工作。这是function： function splitImage(canvas, context, image, isLeftSide) { canvas.width = img.width; canvas.height = img.height; context.save(); if(isLeftSide) { context.drawImage( image, image.width / 2, 0, image.width, image.height, canvas.width / 2, 0, canvas.width, canvas.height ); context.scale(-1, 1); context.drawImage( image, image.width / 2, 0, image.width, image.height, -canvas.width / 2, 0, […]

HTML2Canvas将2个捕获的canvas合并为一个: 使用HTML2Canvas我正在尝试捕获googleMap（其工作正常）然后捕获超过它顶部的#overlay div（允许人们在特定位置将图像放在googleMap上））（工作良好）。然后页面在页面上显示这两个canvas元素，然后我想再拍摄一次，将两个canvas组合成一个可以下载的单个图像。到目前为止我遇到的问题是，当我尝试捕获我的#preview div时，似乎HTML2Canvas没有拾取它创建的canvas元素。 HTML： Download as PDF Start Editing HTML2Canvas JQuery： $(“.download”).click(function() { html2canvas($(“#map”), { logging: true, proxy: “https://html2canvas.appspot.com/query”, onrendered: function(canvas) { // var img = canvas.toDataURL(“image/png”); $(canvas).css({“position” : “absolute”, “z-index” : “999”}); document.getElementById(“preview”).appendChild(canvas); html2canvas($(“#overlay”), { logging: true, onrendered: function(canvas1) { // var img = canvas.toDataURL(“image/png”); $(canvas1).css({“position” : “absolute”, “z-index” : […]

使用html2canvas进行屏幕捕获: 我从另一个类调用screenView() 。我能够调用它，但我没有得到strDataURI 。我究竟做错了什么？ function screenView(){ var image; var date = new Date(); var message, timeoutTimer, timer; var proxyUrl = “http://html2canvas.appspot.com”; var iframe,d; $(this).prop(‘disabled’,true); var url = “http://www.facebook.com/google”; var urlParts = document.createElement(‘a’); urlParts.href = url; $.ajax({ data: { xhr2:false, url:urlParts.href }, url: proxyUrl, dataType: “jsonp”, success: function(html){ iframe = document.createElement(‘iframe’); $(iframe).css({ ‘visibility’:’hidden’ }).width($(window).width()).height($(window).height()); $(‘#content’).append(iframe); […]

使用Javascript将文件扩展名下载Html5 canvas元素作为图像: 我希望能够使用Javascript将文件扩展名下载Html5 canvas元素作为图像。 CanvasToImage库似乎无法实现这一点。到目前为止，这是我的代码，你可以在这个JsFiddle看到。 create download $(“#create_image”).click(function() { var cnvs = createSmileyOnCanvas(); $(‘#canvas_container’).append(cnvs); }); $(“#download_image”).click(function() { var img = $(‘#smiley_canvas’).toDataURL(“image/png”); var uriContent = “data:application/octet-stream,” + encodeURIComponent(img); window.open(uriContent, ‘download smiley image’); }); function createSmileyOnCanvas() { var canvas = document.createElement(‘canvas’); canvas.id = ‘smiley_canvas’; var ctx = canvas.getContext(‘2d’); // Draw shapes ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); […]