canvas

Generating images in HTML5 canvas

由 左心房为你撑大大i 提交于 2019-12-25 13:43:45
问题 I am experimenting with canvas and I am having some trouble. Please see this codepen: http://codepen.io/JonnyBoggon/pen/YGgKqQ I would like to generate two (or more potentially) floating images - which collide - like the circles in my codepen. So, exactly as it is now, but with images rather than circles. function makeAmpersands(num) { var x, y, vx, vy, r, m, ke, colliding, src; for (var i = 0; i < num; i++) { x = Math.random() * canvas.width; y = Math.random() * canvas.height; vx = Math

javascript HTML5 canvas display from python websocket server

由 人盡茶涼 提交于 2019-12-25 12:44:56
问题 I created a websocket server that uses ZeroMQ4 to talk to a middleware. I also created a peice of Javascript to display information back from the middleware. I know the Websocket server works and is able to send to the javascript as i tested with small string output. So, I want to send an png image from the websocket server to Javascript, but the Javascript documentation of canvas is confusing and I haven't found a solid example good for a newbie with Javascript. This is the Javascript I have

Touch Events “touchstart” returns incorrect position on Mobile Safari. Workarounds?

由 青春壹個敷衍的年華 提交于 2019-12-25 12:26:08
问题 I am developing an HTML5 Canvas project and while adding multitouch support for mobile devices, I seem to have run into an issue on Mobile Safari in iOS 7.1. The main way that users interact with my app is by clicking and dragging. On the desktop, I add the appropriate mouse event listeners to my canvas... c.addEventListener('mousedown', mouseDown, false); c.addEventListener('mousemove', mouseMoved, false); c.addEventListener('mouseup', mouseUp, false); ... have these event handlers calculate

How to fill text with particles using p5js

由 北慕城南 提交于 2019-12-25 12:05:31
问题 I want to fill a text with particles like this I tried to do this using p5.js but I am stuck where the particles are only appearing on the edges. Any idea to accomplish this rather than having it on the edges? Here is my attempt. Thanks a ton in advance :) SteeringDemo.html <body> <script> var font; var vehicles=[]; var x=1360; var y=400; function preload() { font=loadFont('Poppins-Medium.ttf') } function setup() { var canvasDiv = document.getElementById('canvas'); var width = canvasDiv

How to fill text with particles using p5js

由 心已入冬 提交于 2019-12-25 12:04:22
问题 I want to fill a text with particles like this I tried to do this using p5.js but I am stuck where the particles are only appearing on the edges. Any idea to accomplish this rather than having it on the edges? Here is my attempt. Thanks a ton in advance :) SteeringDemo.html <body> <script> var font; var vehicles=[]; var x=1360; var y=400; function preload() { font=loadFont('Poppins-Medium.ttf') } function setup() { var canvasDiv = document.getElementById('canvas'); var width = canvasDiv

Rotate Bitmap on Canvas Android

由 爱⌒轻易说出口 提交于 2019-12-25 11:12:36
问题 I have a class extending SurfaceView. I have an image of a needle which i have drawn on canvas through Bitmap. I want to rotate this needle with one fixed point on click of a button. What is the logic for rotating needle ? Suppose i have called onDraw(Canvas canvas) on click of a button and i want to rotate needle by 5 degrees every time. this is my code public class PingPongSurfaceView extends SurfaceView implements SurfaceHolder.Callback { private Bitmap needle = null; public

Rotate Bitmap on Canvas Android

由 扶醉桌前 提交于 2019-12-25 11:12:08
问题 I have a class extending SurfaceView. I have an image of a needle which i have drawn on canvas through Bitmap. I want to rotate this needle with one fixed point on click of a button. What is the logic for rotating needle ? Suppose i have called onDraw(Canvas canvas) on click of a button and i want to rotate needle by 5 degrees every time. this is my code public class PingPongSurfaceView extends SurfaceView implements SurfaceHolder.Callback { private Bitmap needle = null; public

Make a canvas line with a point at the end

由 梦想的初衷 提交于 2019-12-25 10:22:04
问题 I am trying to make the end of a canvas into a point (sort of like an arrow, except that the sides should not come out beyond the width of the line...see the following picture for an example of how the line end should look). See the following picture for an example of how the line end should look. I was experimenting with line caps, but the only available caps are 'round' or 'square' (http://www.w3schools.com/tags/canvas_linecap.asp). The following fiddle is the line that I am trying to give

Make a canvas line with a point at the end

由 孤人 提交于 2019-12-25 10:21:08
问题 I am trying to make the end of a canvas into a point (sort of like an arrow, except that the sides should not come out beyond the width of the line...see the following picture for an example of how the line end should look). See the following picture for an example of how the line end should look. I was experimenting with line caps, but the only available caps are 'round' or 'square' (http://www.w3schools.com/tags/canvas_linecap.asp). The following fiddle is the line that I am trying to give

Kivy Fade-In Animation

由 岁酱吖の 提交于 2019-12-25 09:34:33
问题 Is there a way to get a fade-in/-out animation on a canvas rectangle background in kivy? I tried it by using the Clock.schedule_interval() function. But several problems occured concerning concurrency and data raise. One of my tries looks as follows: def calendarClicked(self, *args): self.alpha = 1.0 self.alphaDelta = 0.01 self.root.canvas.add(Color(1,0,0,self.alpha)) self.root.canvas.add(Rectangle(size=self.root.size)) def fadeIn(self, dt): self.alpha -= self.alphaDelta self.root.canvas.add
订阅 canvas