canvas

问题 I am a new user of html5 and using canvas to draw circle for one of my application. I have drawn several arcs to form a circle. it works fine. However my problem is that i want to associate a separate mouse event for each of the arc. I goggled and found KinteticJS may be useful. I wish to know is there any other way that could be used to attached mouse event for every arc i created using the canvas. Please note i have used just one canvas there is no ghost canvas and I do not wish to use SVG.

问题 I have an array called front images written as var frontImages = []; . From what I understand javascript arrays don't need a specified length. When I run the code below, it prints 0 as the length of the array when output to the console. However, when I specify the array length as var frontImages = new Array(3); , it prints out 3, the correct length of the array. Why doesn't the array with the unspecified length return 3? function getMainPosters() { var games = new Image(); //create 3 images

问题 I wanna to fill a path like a circle or a custom path with an image but wanna the image to stretch, so that the pixels of the image don't reside outside the closed path. Is this possible to achieve in HTML5 using the Canvas object ? Here is my custom path: ctx.beginPath(); ctx.moveTo(170, 80); ctx.bezierCurveTo(130, 100, 130, 150, 230, 150); ctx.bezierCurveTo(250, 180, 320, 180, 340, 150); ctx.bezierCurveTo(420, 150, 420, 120, 390, 100); ctx.bezierCurveTo(430, 40, 370, 30, 340, 50); ctx

问题 Trying to get two balls to collide and bounce back at appropriate angles. When the balls collide however they get stuck together and I have no idea what I'm doing wrong here. I'm calling this checkCollision() function within my animate function Obviously cx is ball1 xpos , cx2 is ball2 xpos . Same for cy . function checkCollision () { var dx = cx2 - cx; // distance between x var dy = cy2 - cy; // distance between y var distance = Math.sqrt(dx * dx + dy * dy); if (distance < (radius1 + radius2

问题 Currently, I'm doing a mini game which only has a box and a character. The character can freely move around. I did so it moves 640px/second. The "formula" I use to get the pixels to move each frame is ((currentFrameTimeMs - lastFrameTimeMs) * pxPerSecond) / 1000 . Actual values are ((currentFrameTimeMs - lastFrameTimeMs) * 640) / 1000 . This effectively makes my character to move exactly 640px/s. But the problem is that when moving, I see it as "fuzzy". I've checked out the FPS, and it's very

问题 Currently, I'm doing a mini game which only has a box and a character. The character can freely move around. I did so it moves 640px/second. The "formula" I use to get the pixels to move each frame is ((currentFrameTimeMs - lastFrameTimeMs) * pxPerSecond) / 1000 . Actual values are ((currentFrameTimeMs - lastFrameTimeMs) * 640) / 1000 . This effectively makes my character to move exactly 640px/s. But the problem is that when moving, I see it as "fuzzy". I've checked out the FPS, and it's very

问题 I'm trying to download a canvas image to the desktop using the following code: <script type="text/javascript"> var canvas; $(document).ready(function() { if ($('#designs-wrapper').length) { $('.design').each(function() { var design = $(this).attr('data-design'); var canvas = $(this).find('canvas')[0]; var ctx = canvas.getContext('2d'); var img = new Image; img.onload = function() { ctx.drawImage(this, 0, 0); }; img.src = design; }); } $('#canvas').click(function() { this.href = canvas

问题 I'm currently working with some images in canvas, and I would like to draw a box around an image with a transparent background (see the example at the bottom) I'm getting my data through: context.getImageData(0, 0, canvas.width, canvas.height); I already got only the black (not transparent) data inside my result; with this I tried the marching squares algorithm suggested by a few stack-overflowers, but I couldn't quite figure that out. I also tried cycling through all the data and get the

问题 I'm making an HTML5 game and I'm new to this, My issue is that I'm making a 2D game and I have a background that is bigger than my canvas. I need that when my main object moves the camera moves with it so new background parts appear? But also that the rest of the objects disappear when required. A little example will be http://www.realmofthemadgod.com Thanks 回答1: Here is a good example from Simon Sarris: jsFiddle link Ignore the line below - posting a jsFiddle link requires accompanying code

问题 My test Android app has a single activity, LoadImage, with two methods: an onCreate method that processes images with OpenCV, and a Display method which displays the image on the screen for 5 seconds. Here is what I have so far for the Display method: [convert OpenCV matrix to a bitmap using an OpenCV method] Canvas canvas = new Canvas(bitmap); canvas.drawBitmap(bitmap, 0, 0, null); try { synchronized (this) { wait(5000); } } catch (InterruptedException e) { } and here is the XML file for the