pixi.js | 易学教程

How to add inertia to animations tracking mouse move?

阅读更多关于 How to add inertia to animations tracking mouse move?

I'm trying to rotate a triangle around an origin point using mouseMove event. I'm getting the touch start point and the current touch point using touchstart and touchmove events, then I'm finding the angle of direction easily using: alpha = y2 - y1 / x2 - x1; // alpha is the tangent of the angle beta= atan(alpha); // beta is the angle in radians Then I'm rotating the element in PIXI : function animTriangle (beta) { // initially clear the previous shape myTriangle.clear(); // draw a new shape in new positions myTriangle.beginFill(0x000000, 0.1); myTriangle.moveTo(origin.x, origin.y); myTriangle

Rendering WebGL image in headless chrome without a GPU

阅读更多关于 Rendering WebGL image in headless chrome without a GPU

问题 I'm trying to export an image rendered with WebGL on a linux server without a GPU. To do this I'm using headless Chrome however the exported image is black (example exported image, taking a screenshot of page shows its just canvas that is black). I was hoping for some help figuring out why this is happening. To export the image I render the image into a canvas, export data via canvas.toDataURL('image/jpeg') and then post the data to the server. I'm using Pixi.js for rendering, if I use canvas

Dynamically resize the pixi stage and it's contents on window resize and window load

阅读更多关于 Dynamically resize the pixi stage and it's contents on window resize and window load

问题 I'm trying to dynamically resize the pixi stage (canvas and contents) on window resize. And also have it initially load at the size of the browser window without changing ratio. I'm using the following to set the initial size basically to window.innerWidth & window.innerHeight - but it's doing something strange, it's loading at a smaller size (but not the size of the canvas specified in the html) then it's expanding to fit the window. var w; var h; window.onload = function() { var w = window

Saving canvas to image via canvas.toDataURL results in black rectangle

阅读更多关于 Saving canvas to image via canvas.toDataURL results in black rectangle

Im using Pixi.js and trying to save a frame of the animation to an image. canvas.toDataUrl should work, but all i get is a black rectangle. See live example here the code I use to extract the image data and set the image is: var canvas = $('canvas')[0]; var context = canvas.getContext('2d'); $('button').click(function() { var data = renderer.view.toDataURL("image/png", 1); //tried var data = canvas.toDataURL(); $('img').attr('src', data); }) Kaiido [NOTE] While this answer is the accepted one, please do read the one by @gman just below, it does contain a way better way of doing. Your problem

Saving canvas to image via canvas.toDataURL results in black rectangle

阅读更多关于 Saving canvas to image via canvas.toDataURL results in black rectangle

问题 Im using Pixi.js and trying to save a frame of the animation to an image. canvas.toDataUrl should work, but all i get is a black rectangle. See live example here the code I use to extract the image data and set the image is: var canvas = $('canvas')[0]; var context = canvas.getContext('2d'); $('button').click(function() { var data = renderer.view.toDataURL("image/png", 1); //tried var data = canvas.toDataURL(); $('img').attr('src', data); }) 回答1: [NOTE] While this answer is the accepted one,