canvas

问题 This question already has an answer here : Canvas image crossplatform insecure error (1 answer) Closed 3 years ago . When trying to draw an image onto a canvas, and then saving the canvas to an image, I get the following error: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported var picture = new Image(); picture.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png"; var canvas =

问题 I have a canvas webpage that functionally works but occasionally sizes incorrectly on start up. Says I have declared a canvas html tag like this: <canvas id="main_canvas"></canvas> And I have included a javascript file that takes care of the sizing using jquery $(function() { var canvas = $('canvas')[0]; var DISPLAY_WIDTH = window.innerWidth-10, DISPLAY_HEIGHT = 620, Occasionally after the page loads the canvas size is squeezed into a very small area and all objects rendered is stacked upon

问题 I have a canvas with width = 900, height = 574 . I have all the pixels of the canvas. Inside the canvas there are some rectangles, knowing all the pixels of a rectangle what I want is to find the coordinates of the 4 points of a rectangle and then find the width and height of the rectangle. So what I did is: pMinX = (_.min(points)/ 4) % highlightCanvas.width pMinY = Math.floor((_.min(points) / 4) / highlightCanvas.width) pMaxX = (_.max(points) / 4) % highlightCanvas.width pMaxY = Math.floor((

问题 I have a canvas with width = 900, height = 574 . I have all the pixels of the canvas. Inside the canvas there are some rectangles, knowing all the pixels of a rectangle what I want is to find the coordinates of the 4 points of a rectangle and then find the width and height of the rectangle. So what I did is: pMinX = (_.min(points)/ 4) % highlightCanvas.width pMinY = Math.floor((_.min(points) / 4) / highlightCanvas.width) pMaxX = (_.max(points) / 4) % highlightCanvas.width pMaxY = Math.floor((

问题 I am trying to create a game so that the player can move in all directions (N,NW,W,SW,S,SE,E,NE) although when I capture the key strokes it will move me once in one of the diagonal directions then, but if I hold them down it switches to one of the cardinal directions(N,W,S,E). Main Class Key Listener private class MultiKeyPressListener extends KeyAdapter { private final Set<Character> pressed = new HashSet<Character>(); @Override public synchronized void keyPressed(KeyEvent e) { pressed.add(e

问题 i am working on an app that types text on to the image..so i dont want the text to go out of the image. here is my code: style #container{ overflow: hidden; z-index: 0; } #myCanvas{ z-index: 1000; border: 2px solid red; width: 100%; } html code <div id="container"> <canvas id="myCanvas"></canvas> </div> script $(document).ready(function(){ var context2= $("#myCanvas")[0].getContext('2d'); $("#myCanvas,#container").height((3*window.innerWidth)/4); context2.fillStyle = "#0000ff"; context2

问题 I'm programming a tilebased Game that consists of multiple Layers. However, when i draw the map and try to scale the canvas via CSS, i experience the fact, that the tiles of the upper Layer get a border, which is not intended. the code for drawing the tiles looks like this: for (var key in Nodes) { var currentNode = Nodes[key]; var tileProb = Math.floor(Math.random() * 10 + 1); if (tileProb < 2) { currentNode.passable = false; canvasLayerZero.drawImage(currentNode.img, 0, 0, tileDim, tileDim,

问题 I have an ImageView which has a transparent drawable with a circle at the center like (http://wallpaperswide.com/circle_outline-wallpapers.html). Just that the circle is red, and the surrounding are not coloured but are transparent, it is a .png image. So now I will implement Canvas.ondraw() , and when while tracing the user goes outside the circle, the drawing should restart. The doubt is: 1. How do I detect the boundaries of this image without hardcoding. 2. How do I detect that the user

问题 I'm having a huge perf issue when using EaselJS vs Canvas native method : 2.2 s vs 0.01 s (although EaselJS do map canvas native methods...). I wrote a canvas app which draws a tree*. In order to animate the growth af the tree, it seems cleaner and handier to tween an EaselJS graphics object than writing a custom drawing function. *(actually it'll look more like a virginia creeper) 1) I must have done something wrong, as the perf with EaselJS are awfull. The significant piece of the code :

问题 I use the following code to draw a square on an inkcanvas at the position of the mouse. But it doesn't draw the shape at the centre of the mouse position, instead slightly to the right and much lower as demonstrated by the following image: Additionally I would like to stop the pen from drawing when I click to add a shape to the canvas. How can I correct the positioning and stop the pen drawing? private void inkCanvas_MouseMove(object sender, MouseEventArgs e) { cursorCoords.Content = Mouse