html5-canvas

Animating a “Wobbly Canvas” like in Discord's Login page?

由 喜欢而已 提交于 2020-01-21 04:53:04
问题 For reference, I'm talking about the dark-gray space in the upper left of Discord's Login Page. For anyone who can't access that link, here's a screenshot: It has a number of effects that are really cool, the dots and (darker shadows) move with the mouse, but I'm more interested in the "wobbly edge" effect, and to a lesser extent the "fast wobble/scale in" on page load (scaling in the canvas on load would give a similar, if not "cheaper" effect). Unfortunately, I can't produce much in the way

How to save canvas image using classic ASP?

由 ﹥＞﹥吖頭↗ 提交于 2020-01-21 03:34:20
问题 I'm a bit stuck here. I know that I can use the canvas.toDataURL to produce a base64 encoded string to pass to a classic ASP page on my server. But the problem I can't seem to find an answer to is how to process this data so I can save it someplace on my server. So with this snippet of code on my HTML page, I pull the canvas data (I pulled this from another post here at StackOverflow): var dataURL = renderedCanvas.toDataURL("image/png"); dataURL = dataURL.replace('data:image/png;base64,', '')

disabling imageSmoothingEnabled by default on multiple canvases

由 我的未来我决定 提交于 2020-01-20 08:51:25
问题 I'm creating a browser-based game that uses layered canvases and sprite images, and for visual and performance reasons I would like to disable imageSmoothingEnabled by default. It's my understanding that imageSmoothingEnabled isn't available in all browsers, but there are vendor-prefixed versions. I am trying to find an elegant way to disable this attribute by default across all my canvases (in as many browsers as possible). So far, this is my method: context1.imageSmoothingEnabled = false;

How to use canvas to modify images from another domain?

由 廉价感情. 提交于 2020-01-20 05:25:10
问题 This is the code i am using when i have image.src = "/local/directory/image.png" works but if i use image.src="http://remote/path" it loads the image but rest mousemove function do not work. How do you fix it? copy and paste to test.htm <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script> $(document).ready(function() { var image = new Image(); var ctx = $('#canvas')[0].getContext("2d"); image.src = "http://www.google.com/intl

Why doesn't image show on load, but shows on refresh?

由 吃可爱长大的小学妹 提交于 2020-01-20 04:35:05
问题 I'm playing with the canvas element in HTML5 and I have noticed a peculiar behavior. On initial load, an image I'm displaying does not show. However, when I refresh the browser, it displays appropriately. I've used IE9 and Chrome. Both behave identically. The JavaScript code looks like this: window.onload = load; function load() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillRect(0, 0, 640, 400); var image = new Image(); image.src =

HTML5 Canvas: Get Event when drawing is finished

由 扶醉桌前 提交于 2020-01-19 05:37:59
问题 I'm drawing an image to a canvas element. I then have code that depends on this process to be finished. My code looks like this: var myContext = myCanvasElement.getContext('2d'), myImg = new Image(); myImg.onload = function() { myContext.drawImage(containerImg, 0, 0, 300, 300); }; myImg.src = "someImage.png"; So now, I would like to be notified when drawImage is done. I checked the spec but I couldn't find either an event or the possibility to pass a callback function. So far I just set a

How to protect js from custom events

由 久未见 提交于 2020-01-17 08:05:34
问题 I am writing a game on Javascript with canvas and easeljs and I wonder if there are any ways to protect it. For example, I use stage.Addchild(index) to add a new object to the stage. Simply editing DOM I can attatch new event handler and fire it, something like <body onclick="stage.removeChild(0)"> and this will remove all the stage objects one by one. I was thinking to filter all the coming events and check what had fired it. But I am not sure how to do that and there may be better ways to

Replicate the partial CSS Grayscale filter in JavaScript?

由 戏子无情 提交于 2020-01-17 05:21:09
问题 I can convert an image to fully grayscale version easily. What I can't do is replicate partial grayscaling. For example, .image { filter: grayscale(0.5); } This filter applied in CSS will only turn the image partially grayscale. I want to do the same in JavaScript on a canvas image. Can anyone please help me with that? I know how to make an image fully grayscale. I am looking for a way to make the effect less intense and I want to do it using JavaScript canvas. All the images above have the

Chart.js Find intersection Point and Draw a Circle

由 倾然丶 夕夏残阳落幕 提交于 2020-01-17 04:27:05
问题 I am using chart.js for generating line chart. Its works me successfully. But I need to draw a circle or point at Intersection and draw a line towards "X" axis. Can you please any one help me to get this? Thanks in advance. 回答1: The main points to achieve this with chartjs (without being an chartjs expert by any means) would be: Method 1 - Math Step 1 Unless you can get a processed point array from chartjs' internals, you would have to, as chartjs uses Bezier curves to draw the graphs,

EaselJS animate though frames based in current frame

由 蹲街弑〆低调 提交于 2020-01-16 19:13:07
问题 I'm working with EaselJS SpriteSheets and I want to know how I can make my hero stop running smoothly, So if the SpriteSheet is playing the "run" animation and it's on frame 5, I'll need to animate though frames 6, 7, 8, 8, 8, 7, 6, 5 and then stop on 0 in order make my hero stand still. How can I do that? Here's my SpriteSheet: Note that the frames aren't consecutive: They go from 0 to 4, 4 to 0 then 5 to 8. Frame 9 is unused. Here's my SpriteSheet code: user.hero.bmp = new createjs.Bitmap(
订阅 html5-canvas