canvas

问题 I am creating a multiple item drag and drop for a project and have a reached a wall. At present I have 5 square items I have added to the canvas and also stored there x, y, width, height, bgcolour into an array called items. I have detected when the mouse selects one of these squares and can drag an item around. However my issue is that the item I am dragging around is always the same item, the first one added to the canvas. If anybody could help me work out how to detect which item

问题 I have a ReactJS application. I'm dynamically generating SVG images as JSX components. So far, so good -- but now I need to use the SVG as an image source in a Canvas element. This works fine with static SVG files, but how can I get the dynamic SVG into the canvas? A simplified version appears in the snippet. Two approaches to the drawImage call are shown in the componentDidMount method: creating an unmounted SvgSource, and using a ref to one mounted on the page, but they both fail. class App

问题 I am novice in work with canvas. My challenge is moving object from one static coordinate to another by the arc. I have used code example of solar system from https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations , but after press on f5 in browser my object remains at the current location.I want to return my object to the starting point afet pressing f5 and to stop moving object when it get final point. function draw() { var ctx = document.getElementById(

问题 I have a canvas, size 400 x 400. On it, i have drawn a map area, 200 x 200. I have translated this to the center of the canvas. I can zoom in and out, all is well. But, when i pan, it zooms from the center of my map area. I want it to always zoom from the center of the canvas no matter where the map area is. I think i need to negate the pan coords somehow, but i can't figure it out. Here is my code: var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var

问题 I am working on an HTML5 Canvas game, and the level needs to pre-load some images (and eventually other data such as audio files, too). I am planning on having all of these images stored in an array, or a container object. What I need to do is find a way to wait until all of these images are downloaded completely before continuing in the game. This does NOT happen when the page is opened. This happens deep within the running script, and the images are dynamically loaded. The idea is to

问题 Normally to cut one shape out from another using Canvas, I've used the globalCompositeOperation option "xor": var c2 = document.getElementById('canvas').getContext('2d'); c2.globalCompositeOperation = "xor"; c2.fillRect(0, 0, 200, 200); c2.fillRect(170, 0, 30, 30); // shape 2 is cut out from shape 1 However, when either the fillStyle has a alpha value < 1, or the globalAlpha of the context is < 1, the "cut-out" shape is no longer completely invisible. Specifically, if the alpha is >0.5 and <1

问题 I keep reading that images are already loaded asynchronously, or to use onload (which doesn't solve the problem). When loading a large image, specifically from canvas.toDataURL() , the whole page freezes while the image is being loaded. What I'm doing specifically is prerendering a procedurally generated map (for a game) in a hidden canvas, then loading that data into an image to draw faster. The actual problem is setting the src, which happens even if I just img.src=img.src to invoke loading

问题 I've recently posted a similar question specifically for KonvaJs here, however, I have not gotten any answer and wanted to go directly to the root of what KonvaJs uses. I would like to know if there's a standard way of solving the following problem using HMTL5 Javascript Canvas. If I am given 3 circles and they are positioned as the primary color circles (3 circles intersecting each other), is there a function that might help me to delete the parts that are not colliding with anything and

问题 I have two objects a parent (red) and a child (blue). The parent object is fixed and can't be moved , only the child object is movable and the child is always bigger than the parent. In whatever way the child object is moved it should always be contained inside the child, which means we should never see the red rectangle. Demo: https://codesandbox.io/s/force-contain-of-object-inside-another-object-fabric-js-7nt7q I know there are solutions to contain an object within the canvas or other

问题 I have two objects a parent (red) and a child (blue). The parent object is fixed and can't be moved , only the child object is movable and the child is always bigger than the parent. In whatever way the child object is moved it should always be contained inside the child, which means we should never see the red rectangle. Demo: https://codesandbox.io/s/force-contain-of-object-inside-another-object-fabric-js-7nt7q I know there are solutions to contain an object within the canvas or other