Tag: html5 canvas

受污染的canvas不得出口: 我想保存我的canvas到img。我有这个function： function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } 它给我错误：未捕获的SecurityError：无法执行“HTMLCanvasElement”上的“toDataURL”：受污染的canvas可能无法导出。我该怎么办？

真正的鼠标在canvas上的位置: 我试图用鼠标在HTML5canvas上绘制，但是看起来效果不错的唯一方法是如果canvas位于位置0,0（左上angular），如果我更改canvas位置，出于某种原因它并不像它应该画的那样。这是我的代码。 function createImageOnCanvas(imageId){ document.getElementById("imgCanvas").style.display = "block"; document.getElementById("images").style.overflowY= "hidden"; var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d"); var img = new Image(300,300); img.src = document.getElementById(imageId).src; context.drawImage(img, (0),(0)); } function draw(e){ var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d"); posx = e.clientX; posy = e.clientY; context.fillStyle = "#000000"; context.fillRect (posx, posy, 4, 4); } HTML部分 <body> […]

CanvasContext2D drawImage（）问题: 我试图在获取dataURL()之前在canvas上绘制图像，但返回的数据是空的。当我在控制台中检查时，我看到string中有很多A ：（ "data:image/png;base64,iVBO..some random chars… bQhfoAAAAAAAAAA… a lot of A …AAAASUVORK5CYII=" ）当我尝试将canvas追加到文档中时，也没有绘制任何内容，而且在控制台中没有任何错误。这里有什么问题？这是我的代码： var img = new Image(); img.src = "http://somerandomWebsite/picture.png"; var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var context = canvas.getContext('2d'); context.drawImage(img, 0,0); // this doesn't seem to work var dataURL = canvas.toDataURL(); // this will give me […]

如何清除canvas重绘: 在实验完成复合操作并在canvas上绘制图像后，我正在尝试删除图像和合成。我如何做到这一点？我需要清除canvas重绘其他图像; 这可能会持续一段时间，所以我不认为每次绘制一个新的矩形将是最有效的select。

Html5画布drawImage：如何应用抗锯齿: 请看下面的例子： http://jsfiddle.net/MLGr4/47/ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); img=new Image(); img.onload=function(){ canvas.width=400; canvas.height=150; ctx.drawImage(img,0,0,img.width,img.height,0,0,400,150); } img.src="http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg"; 如您所见，尽管据说drawImage会自动应用消除锯齿，但图像不是反锯齿。我尝试了很多不同的方法，但似乎并不奏效。你能告诉我如何得到反锯齿图像？谢谢。