Tag: canvas

当我尝试在响应头中获取具有Access-Control-Allow-Origin：*的图像的图像数据时，为什么会出现exception18？: 当我尝试通过方法getImageData获取图像的像素时，我遇到了这个错误 “无法从canvas获取图像数据，因为canvas已被跨源数据污染。未捕获错误：SecurityError：DOM Exception 18” 图像在标题响应中具有Access-Control-Allow-Origin：* 。所以，我不明白为什么我得到这个错误。我该怎么做才能解决这个问题？我试图将属性crossOrigin添加到图像中，但这在Safari中不起作用。我正在处理的代码如下。 Example var img = new Image(); img.onload = function() { var ctx = $(‘#cnv’)[0].getContext(‘2d’); ctx.drawImage(this, 0, 0); var originalImageData = ctx.getImageData(0, 0, 300, 300); // Exception 18 }; img.src = ‘http://api.thumbr.it/1f86404a001828912f295a74b8a4d337/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebrown-eframe1/thumb.jpg’; $(‘body’).append(img); Example

KineticJS中的约束/比例缩放: 当拖动图像的4个角手柄中的任何一个时，图像应按比例向上或向下缩放。问题：我目前的尝试如下面链接的jsfiddle所示，当topLeft句柄垂直拖动时，图像按比例topLeft ，但另一个处理闪烁。当水平拖动相同的topLeft手柄时，图像只是移动而不resize。如何使用KineticJS实现比例缩放？谢谢！！！ jsfiddle： http ： //jsfiddle.net/zb3Km/

找到点和圆Canvas之间的切线: 好吧，有些我的三角学有点生疏了。基本上我正试图在canvas上做一些聚光灯。我试图保持9度角，这就是为什么这有点棘手。到目前为止，这是我的小提琴。 http://jsfiddle.net/uq8fe/ it’s a bit long please refer to the fiddle /\ 非常接近，但我需要圆上的切点，所以我可以在这两个点和鼠标之间绘制一个三角形，所以我看起来像一个很好的光滑光束。 http://en.wikipedia.org/wiki/File:Inscribed_angle_theorem4.svg 以上基本上是我需要实现的图表和公式。我需要点T和S.我希望这是有道理的。

canvas获取鼠标事件的点数: 我有以下function来获取鼠标点击位置（坐标）。 $(‘#myCanvas’).on(‘click’, function(e) { event = e; event = event || window.event; var canvas = document.getElementById(‘myCanvas’), x = event.pageX – canvas.offsetLeft, y = event.pageY – canvas.offsetTop; alert(x + ‘ ‘ + y); }); 我需要在点击一个位置时获得鼠标点，并在拖动鼠标点位置后将其锁定。即，mousedown point和mouseup points。

在CSS缩放canvas中获得正确的鼠标位置: 我一直在尝试采用几个简单的MooTools操作的逻辑并将其转换为使用jQuery。我想要的逻辑是这个jsfiddle ，它允许在css大小调整的canvas元素上获得准确的鼠标位置。我在这里找到了答案所以我已经工作了几个小时但没有用我想我理解他的逻辑，但由于某种原因，我没有看到结果这是我迄今为止所做的，arby的逻辑来自他的答案 // Get the change ratio for the new css set size //var cssScale = [canvas.getSize().x / canvas.get(‘width’), canvas.getSize().y / canvas.get(‘height’)]; var cssScale = [$(‘canvas’).height() / $(‘canvas’).attr(‘height’), $(‘canvas’).width() / $(‘canvas’).attr(‘$(‘canvas’).height() / $(‘canvas’).attr(‘height’),’)] //Create an object of the dimensions // I think from my looking at the jsfiddle x&y is the […]

如何确定canvas何时完成加载: 所以我制作了一个相当大的canvas，里面装满了1×1像素，我想为它制作一个加载画面。循环填充canvas完成后的问题，它警告它已完成加载，但canvas实际上没有改变。我在这里做了一个jsfiddle来演示。我如何实际找出使用javascript或Jquery实际加载canvas的时间，以及导致此行为的原因是什么？ var ctx=document.getElementById(‘canvas’).getContext(‘2d’); for(var x=1;x<600;x++){ for(var y=1;y<600;y++){ var color= '#' + Math.floor (Math.random() * 16777215).toString(16); ctx.fillStyle=color; ctx.fillRect(x,y,1,1); } } alert('done!');

Javascript使图像旋转以始终查看鼠标光标？: 我试图用箭头指向我的鼠标光标在javascript中。现在它只是猛烈旋转，而不是指向光标。这是我的代码的小提琴： https ： //jsfiddle.net/pk1w095s/ 以下是自己的代码： var cv = document.createElement(‘canvas’); cv.width = 1224; cv.height = 768; document.body.appendChild(cv); var rotA = 0; var ctx = cv.getContext(‘2d’); var arrow = new Image(); var cache; arrow.onload = function() { cache = this; ctx.drawImage(arrow, cache.width/2, cache.height/2); }; arrow.src = ‘http://sofzh.miximages.com/javascript/35-200.png’; var cursorX; var cursorY; document.onmousemove = function(e) { […]

在KineticJS中检测点击阶段而不是形状: 在KineticJS中，如何检测Click事件，其中单击发生在对象/形状之外？我试图让一个Rect在用户点击它时将其比例改为2当用户点击它之外的任何地方时返回到1的比例。 JSfiddle： http ： //jsfiddle.net/ABTAD/8/ 管理以检测舞台上的点击，但点击Rect也会触发点击处理程序!!! 不知怎的， .setScale(1)没有做任何事情，而console.log打印出来的东西。当在Rect而不是空阶段上进行单击时，如何防止单击处理程序触发？ JS Code检测点击阶段 window.stage.getContainer().addEventListener(‘click’, function(e) { $.each(window.layer.get(‘.box’), function(index, box) { box.setScale(1); console.log(‘clicked on stage’); }); });

使用chart.js在圆环图中心的事件处理程序: 我在一个页面上创建了4个圆环图，中间有一些文本，我知道这可以通过在中心放置DIV来完成，但我不能使用它，因为当图表下载为PNG时文本不会被导出：演示： https ： //jsfiddle.net/cmyker/ooxdL2vj/ 我需要跟踪中心文本的单击，我尝试使用pageX，pageY来确定是否在中心部分进行了单击。坐标是矩形部分的角，它位于圆环图的中心孔内，并且可能有文本。 jQuery(‘#canvas’).on(‘click’,function(e){ var pageX = e.pageX; var pageY = e.pageY; if((pageY >= 379 && pageY = 440 && pageX <= 629)){ //coordinates are of rectangular area which has text inside the center of doughnut chart. //do something } }); 但如果屏幕的分辨率不同，这将不起作用，因为坐标会有所不同。有什么想法吗？我试图使用raphael.js使中心可点击但不太确定这个尝试。我正在尝试使用container方法在甜甜圈的中心孔中创建一个圆圈，可以在其上附加一个点击处理程序。使用Raphael JS的代码信息 Chart.pluginService.register({ beforeDraw: function(chart) { […]

使用javascript中的mousemove事件在canvas内的图像上绘制一个矩形: 我试图在使用mousemove事件的canvas内的图像上绘制一个矩形。但由于clearRect，我在图像上得到矩形，颜色填充在矩形中。任何人都可以把我搞清楚如何在图像上绘制一个只有边框的矩形。下面是我实现它的代码。 var canvas = document.getElementById(‘canvas’), ctx = canvas.getContext(‘2d’), rect = {}, drag = false; function init() { var imageObj = new Image(); imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); }; imageObj.src = ‘http://sofzh.miximages.com/javascript/darth-vader.jpg’; canvas.addEventListener(‘mousedown’, mouseDown, false); canvas.addEventListener(‘mouseup’, mouseUp, false); canvas.addEventListener(‘mousemove’, mouseMove, false); } function mouseDown(e) { rect.startX = e.pageX – this.offsetLeft; […]