html5-canvas | 易学教程

Moving image that was created by drawImage in canvas

阅读更多关于 Moving image that was created by drawImage in canvas

问题 How just move image in canvas? There are no x\y coordinates which I can change by += or -=. 回答1: Canvas is an immedate drawing surface. When you make a call like drawImage the canvas renders the bitmap to the context and then forgets that anything ever happened. It keeps track of nothing. That means you need to keep track of everything. If you want the image you move, you need to clear the canvas and redraw the image (and everything else in the scene) at a different location than before. This

WebGL Clears Between Each setInterval [duplicate]

阅读更多关于 WebGL Clears Between Each setInterval [duplicate]

问题 This question already has an answer here : WebGL: Prevent color buffer from being cleared (1 answer) Closed 3 years ago . When gl.drawArrays is called sequentially, it draws over the top of the previous graphics on the canvas. However, when I put it inside a setInterval() it clears the canvas before redrawing. code that draws the rectangles on top of each other: for(var i =0; i < 10; i++) { setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20); gl.drawArrays(gl.TRIANGLES, 0, 6); }

JavaScript HTML5-Canvas - Drawing an Arc with SetInterval Causes Jagged Edges

阅读更多关于 JavaScript HTML5-Canvas - Drawing an Arc with SetInterval Causes Jagged Edges

问题 I'm trying to draw a donut chart, and so far I've been successful. The problem is that when trying to animate the arc by combining stroke() with setInterval() , it works, but it does not look smooth, and produces jagged edges. I tried using clearRect() to clear the canvas after the animation was done and re-add the final version of the animation, but I must have been using clearRect() wrong, because it did nothing. If you have any ideas on how to get this looking good, I'd really appreciate

Get dimensions of a HTML5 canvas graphic (Arc), when an event occurs

阅读更多关于 Get dimensions of a HTML5 canvas graphic (Arc), when an event occurs

问题 My question is: how should I do the logical and mathematical part, in order to calculate the position of each arc, when an event is emitted: "click", "mouseover", etc. Points to consider: . Line width . They are rounded lines. . Arc length in percentage. . Which element is first, ej: z-index position. My source code Thank you for your time. 回答1: There is a convenient isPointInStroke() method, just for that. To take the z-index into consideration, just check in the reverse order you drew:

Get bounding client rectangle without borders

阅读更多关于 Get bounding client rectangle without borders

问题 I made a function that transforms mouse coordinates to canvas pixel coordinates: /* Returns pixel coordinates according to the pixel that's under the mouse cursor**/ HTMLCanvasElement.prototype.relativeCoords = function(event) { var x,y; //This is the current screen rectangle of canvas var rect = this.getBoundingClientRect(); //Recalculate mouse offsets to relative offsets x = event.clientX - rect.left; y = event.clientY - rect.top; //Also recalculate offsets of canvas is stretched var width

HTML5 video and canvas CPU optimization

阅读更多关于 HTML5 video and canvas CPU optimization

问题 I am making an app with HTML5 video along with a canvas drawing on top of it (640x480 px). The objective was to record the canvas drawing along with the encoded video to produce it as a single video. I was able to do all these using FFMPEG. But the problem I am facing is, when the HTML5 video is running it takes around 50% of my CPU. Since drawing on canvas is also demanding CPU, the browser freezes after certain time and the CPU usage for that tab on chrome is showing continously > 100. I

Putting HTML5 <canvas> inside <table> nullifies mouse events

阅读更多关于 Putting HTML5 inside nullifies mouse events

问题 I have an HTML5 canvas object, that uses the addEventListener() method multiple times, to be able to respond to mouse events. The lines I use looks like this: canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false); This all works perfectly well, so long as the canvas is directly inside the document's body, or in a div. However, it doesn't work inside a table. Once the canvas is placed there, all the mouse events appear to stop firing. After reading Mouse

making a ball to bounce when a button is clicked

阅读更多关于 making a ball to bounce when a button is clicked

问题 I wrote a program to move a ball when a button is clicked. It is a part of experiment for a bigegr project: Here is the screen shot: And here is the code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5 Random Bouncing Ball</title> <style type="text/css"> <!-- body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; } h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal

How to draw the line in canvas

阅读更多关于 How to draw the line in canvas

问题 I want to draw some lines inside a circle on a canvas, in the following manner. I have no idea how to draw the lines as showed below. But I have the basic knowledge to draw line and arcs on a canvas. How to proceed? 回答1: You can use a bezier curve as suggested in comments with control points, however, these can turn out to be hard to control (no pun) as they do not pass through the points you have defined and you always need to define two control points. In order to achieve a line through

HTML5 canvas image rotate left rotate right

阅读更多关于 HTML5 canvas image rotate left rotate right

问题 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