html5-canvas

问题 I have drawn an image into canvas. Now what i am trying is if user click on roate left button total canvas should rotate left (i.e., Image rotate to 90 degress) and if rotate right canvas should rotate right. this is what i tried for rotation. Please suggest me the code to achieve this var canvasId = document.getElementById("preview"); var cntxt = canvasId.getContext("2d"); cntxt.translate($("#preview").width()-1, $("#preview").height()-1); cntxt.rotate(convertToRadians(90)); cntxt.drawImage

问题 This is a follow up from Canvas - Clear Circular Gradient. Following Hardmath's advice, I was able to clear a radial gradient area in my canvas. However, a new problem has arisen: I can't clear multiple radial gradients next to each other; they end up covering up the previous one. The area what was cleared with the previous one gets covered up the with gradient fade of the current one. See the Fiddle below for an example. Fiddle http://jsfiddle.net/Dragonseer/gXTnM/ Code for(var i = 0; i <

问题 here is the jsfiddle i have this as my source canvas HTML <h1>Source Canvas</h1> <canvas id="source" width=436 height=567></canvas> <h1>Destination Canvas</h1> <canvas id="destination" width=436 height=567></canvas> javascript var sourceImage, ctx, sourceCanvas, destinationCanvas; //get the canvases sourceCanvas = document.getElementById('source'); destinationCanvas = document.getElementById('destination'); //draw the source image to the source canvas ctx = sourceCanvas.getContext('2d');

问题 Based on d3 (ver 1.4) documentation https://github.com/d3/d3-geo/blob/master/README.md#geoProjection , the d3 projection should be set to null to use the data's raw coordinates. How do I scale if the projection looks correct using null? Here is the code: var path = d3.geoPath() .projection(null) .context(context); bands.features.forEach(function(d, i) { context.beginPath(); context.fillStyle = colors[i]; context.globalAlpha = .5; path(d); context.fill(); }); I have tried defining my own

问题 I am checking the use of fonts in SVG and the Canvas (html5). I have translated a svg file in urldata. I got this result: data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjYxMiIgaGVpZ2h0PSIzOTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPkBpbXBvcnQgdXJsKGh0dHA6Ly8xMjcuMC4wLjE6ODAwMC9WZWdhRWRpdG9yL3N0YXRpYy9Nb2RlbGVQb2wvRGVzeXJlbC5jc3MpPC9zdHlsZT4KIDwvZGVmcz4KIDxnPgogIDx0aXRsZT5DYWxxdWUgMTwvdGl0bGU

问题 I writing a meter widget using canvas and need to calculate the label values for the scale. No problem except when I'm trying to re-create the scale for a VU meter. I understand it's logrithmic, but the values aren't powers of 10 on that type of meter. see: https://en.wikipedia.org/wiki/VU_meter The function I have is given the min and max values for the scale. For normal scales, it also is given the step between values. For example, given -20 and 30 with a step of 10, it would produce labels

问题 I want to put image on canvas. initially I used image as background. But whenever I convert canvas to image, background image is not getting copied. Hence I tried to draw image on canvas. I am choosing image from device image gallery. Storing the image url as string and passing to next component. I checked, able to get the value. Please see below code and let me know what I did wrong. 1. HTML <canvas no-bounce id="canvas" (touchstart)='handleStart($event)' (touchmove)='handleMove($event)'

问题 I want to put image on canvas. initially I used image as background. But whenever I convert canvas to image, background image is not getting copied. Hence I tried to draw image on canvas. I am choosing image from device image gallery. Storing the image url as string and passing to next component. I checked, able to get the value. Please see below code and let me know what I did wrong. 1. HTML <canvas no-bounce id="canvas" (touchstart)='handleStart($event)' (touchmove)='handleMove($event)'

问题 I have a draggable line with a stroke width of 2 and want the user to be able to drag the line even if he clicks and drags near the surrounding area. As per my understanding, the way to do that is to define a custom drawHitFunc for the line. I adapted the code from tutorial here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/ to define my custom drawHitFunc for the line. My custom draw hit function is simple--same line but much thicker (25

问题 I have a very simple code that should draw a circle, but its not looking like one, and not at the right position The coordinates are all somewhat shifted. The canvas is set to style="width: 600px; height: 600px;" . I tried it on chrome and safari - looks the same so it's not a browser bug. So my questions are (there is probably one answer for both): If I am putting the center at (100, 100), why is the circle not at an equal distance from the left border, that it is from the top border? Why is