canvas

问题 I'm trying to get the contents of an html5 canvas and pass it to my django server, where it will then be manipulated with PIL and saved as a PNG. Here's what I have so far: From the HTML form, the user clicks the "update" button, the canvas's contents - with canvas.toDataURL() - gets dumped into a text box that is submitted via a POST form. Eventually this will be automatic, but not for now. <input type="text" id="canvasData" name="canvasData"/> <input type='button' value="update" onclick=

问题 When using toDataUrl() to set the source of an image tag I am finding that the image when saved is a great deal larger than the original image. In the example below I am not specifying a second param for the toDataUrl function so the default quality is being used. This is resulting in an image much larger that the original image size. When specifying 1 for full quality the image generated is even larger. Does anybody know why this is happening or how I can stop it? // create image var image =

问题 In a test application i have a canvas with a simple rectangle on it. The method draw is called every 100ms. as you can see from the code i'm using the Mousewheel to scale everything. What happens now is, that everything is scaled, but i.e. when the rectangle is at 10px,10px and i have the mouse right over it the rectangle is not under the mouse anymore after scaling. (Which is of course right because all units are scaled up to. But what i want to is, that the mouseposition is the "center of

问题 Without context.beginPath(); the 10px red stroke at the top is redrawn as a 30px green stroke, even though the 30px and green context properties aren't called until after the stroke has already been drawn. Why is that? window.onload = function() { var canvas = document.getElementById("drawingCanvas"); var context = canvas.getContext("2d"); context.moveTo(10,50); context.lineTo(400,50); context.lineWidth = 10; context.strokeStyle = "red"; context.stroke(); //context.beginPath(); context.moveTo

问题 I want to change color a Image in canvas this is the Image You can see there is a Image transparent I was try using PutImgData but my transparent is changing color Is there anyway to change color the car and money only ? I was using this code : 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

问题 I am attempting to download an entire canvas image using canvas.toDataURL(). The image is a map rendered on the canvas (Open Layers 3). In Firefox I can use the following to download the map on the click of a link: var exportPNGElement = document.getElementById('export_image_button'); if ('download' in exportPNGElement) { map.once('postcompose', function(event) { var canvas = event.context.canvas; exportPNGElement.href = canvas.toDataURL('image/png'); }); map.renderSync(); } else { alert(

问题 i have a problem with a custom view with running on api 15 (Android 4.0.3) the code: canvas.clipRect(10,10,100,100, Region.Op.DIFFERENCE); canvas.drawPaint(myPaint); fills the full area of the view and not just the DIFFERENCE... it works with api 8 and 9... Thanks for your help 回答1: XOR, Difference and ReverseDifference clip modes are ignored by ICS if hardware acceleration is enabled. Just disable 2D hardware acceleration in your view: myView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 来源：

问题 I have created some lines connecting with each other on canvas. Now I want to animate these lines while drawing on canvas. Can anyone please help? here is my code and fiddle URL: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0,0,0); ctx.lineTo(300,100); ctx.stroke(); ctx.moveTo(0,0,0,0); ctx.lineTo(10,100); ctx.stroke(); ctx.moveTo(10,100,0,0); ctx.lineTo(80,200); ctx.stroke(); ctx.moveTo(80,200,0,0); ctx.lineTo(300,100); ctx.stroke(); http://jsfiddle.net

问题 How do I check if there is data or something drawn on a canvas? I have this <canvas id="my-canvas"></canvas> element, and I want to check if my canvas has something drawn on it. 回答1: Instead of checking every single pixel, it may be much more efficient to merely record every time the canvas gets filled or stroked. Once a fill or stroke or has happened, then you know that something has been drawn. Of course 'how' is very application specific, since we don't know how your canvas is getting