html5-canvas

问题 The goal of the following code is to compress the input file (2 MB JPG file => 500 KB file) and then upload it to server when submitting the <form> . When importing an image from a JPG file into a canvas, and exporting it with toDataURL with: function doit() { var file = document.getElementById('file').files[0], canvas = document.getElementById('canvas'), hidden = document.getElementById('hidden'), ctx = canvas.getContext("2d"), img = document.createElement("img"), reader = new FileReader();

问题 The goal of the following code is to compress the input file (2 MB JPG file => 500 KB file) and then upload it to server when submitting the <form> . When importing an image from a JPG file into a canvas, and exporting it with toDataURL with: function doit() { var file = document.getElementById('file').files[0], canvas = document.getElementById('canvas'), hidden = document.getElementById('hidden'), ctx = canvas.getContext("2d"), img = document.createElement("img"), reader = new FileReader();

问题 I am writing a javascript code where image changes color specified by a user.. the code is complete from my side.. but strangely mozilla throw the error IndexSizeError: Index or size is negative or greater than the allowed amount when cleared the cache and next time it runs good.. on chrome it does not run at all .. it says Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data. Im not sure what seems to be the

问题 I have a canvas with multiple circles in different colours and I want add a fade out effect only to some circles. The effect is only applicable to the ones in red and green. The code is as follows function drawPiece(pieceX, pieceY, color) { if (color === "rgba(0,0,0,1)" || color === "rgba(255,255,255,1)"){ ctx.beginPath(); ctx.fillStyle = color; ctx.arc(pieceX, pieceY, 50, 0, 2 * Math.PI, false); ctx.fill(); ctx.lineWidth = "4"; ctx.strokeStyle = "rgba(0,0,0,1)"; ctx.stroke(); ctx.closePath()

问题 Im currently making a html5 multiplayer game with socket.io. My problem is that i can only move my character in a straight line, while i also want to be able to move diagonal across my canvas. What i mean by this is if i press the 'a' and 'd' key, my character moves diagonally to the bottom right. With my current code my character only moves to the right or down. //client, how i capture my keyboard input. document.onkeydown = function(event){ console.log(`Keycode: ${event.which}`); if(event

问题 Im currently making a html5 multiplayer game with socket.io. My problem is that i can only move my character in a straight line, while i also want to be able to move diagonal across my canvas. What i mean by this is if i press the 'a' and 'd' key, my character moves diagonally to the bottom right. With my current code my character only moves to the right or down. //client, how i capture my keyboard input. document.onkeydown = function(event){ console.log(`Keycode: ${event.which}`); if(event

问题 I am strugling to create a script to load multiple images for a game drawn on Canvas. The window seems to load without completing the load of all images. I've tried many ways but none of them seems to work. The function drawGameMenu() is called before the images are actually loaded and so the images are not drawn. If someone could help, I would be grateful. Here is my script, kind regards: var imageNames = ["menuImage", "resetScoreButton", "instructionsButton", "playButton", "dialogPanel",

问题 Here is the problem, when I insert an image (let's call it Data A) which is 1.32MB, it will be inserted successfully. But if I will insert again Data A(but it will update now because i used UPSERT, see my code), it will not be updated and it will result to connection time out. But when i insert another data (Data B) which is only 4KB, it will also be inserted successfully and if I will insert again into it(which is update), it will be updated successfully. What can I do? I cannot understand

问题 I am using sketch.js by intridea in my phonegap application.It works allright with the modification case 'touchstart': if (this.painting) {//add this.stopPainting(); //add }//add this.startPainting(); break; by adding the above lines to the code.But I am getting a pageX undefined error which is crashing my app. 01-23 19:53:59.342: E/Web Console(31932): Uncaught TypeError: Cannot read property 'pageX' of undefined at file:///android_asset/www/js/external_libs/sketch.js:107 How to overcome this

问题 I am trying to create a text editor using a canvas . To place the cursor at the right position I need to calculate the width of every character. I am caching the width of each character on initial load. This works fine on Firefox when launched directly but throws an error ( NS_ERROR_FAILURE ) when launched inside an iframe whose parent is hidden. I've narrowed down this case in a fiddle here. Can anyone help me out with the cause of this issue? 回答1: You can't have an iframe set to display