canvas

问题 I'd like to have an HTML5 canvas with rounded corner. I'm using the CSS property border-radius: 15px to round my corners. But, when I draw something in the corner of my canvas, I can draw in the corner. At the beginning: What I have: What I want: Do you have any solution to avoid that? I thought about create a mask but I don't really know how to do.. For information, this works on Firefox but not on Chrome/Safari/Opera. This is a small example: http://jsfiddle.net/XYHpJ/ Thanks! 回答1: Just use

问题 I'm trying to draw a video on a canvas. To achieve this I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (that I need to set the position, width and height of the video inside the canvas). Therefore, every time I draw a video on the canvas, the previous I create should be stopped and the new one has to be played. Two problems: 1) the video doesn't play (the function only draws the first frame), but his audio does 2) how can I get

问题 I'm trying to draw a video on a canvas. To achieve this I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (that I need to set the position, width and height of the video inside the canvas). Therefore, every time I draw a video on the canvas, the previous I create should be stopped and the new one has to be played. Two problems: 1) the video doesn't play (the function only draws the first frame), but his audio does 2) how can I get

问题 I'm trying to draw a video on a canvas. To achieve this I capture the onMouseDown and onMouseUp events in Javascript to get the x and y coordinates of each event (that I need to set the position, width and height of the video inside the canvas). Therefore, every time I draw a video on the canvas, the previous I create should be stopped and the new one has to be played. Two problems: 1) the video doesn't play (the function only draws the first frame), but his audio does 2) how can I get

问题 I want to get all the x,y coordinates between 2 given points, on a straight line. While this seems like such an easy task, I can't seem to get my head around it. So, for example: Point 1: (10,5) Point 2: (15,90) 回答1: Edit: The solution below only applies from a geometrical point of view. Drawing on a screen is different than theoretical geometry, you should listen to the people suggesting Bresenham's algorithm. Given, two points, and knowing that the line's equation is y = m*x + b , where m

问题 I want to get all the x,y coordinates between 2 given points, on a straight line. While this seems like such an easy task, I can't seem to get my head around it. So, for example: Point 1: (10,5) Point 2: (15,90) 回答1: Edit: The solution below only applies from a geometrical point of view. Drawing on a screen is different than theoretical geometry, you should listen to the people suggesting Bresenham's algorithm. Given, two points, and knowing that the line's equation is y = m*x + b , where m

问题 I want to get all the x,y coordinates between 2 given points, on a straight line. While this seems like such an easy task, I can't seem to get my head around it. So, for example: Point 1: (10,5) Point 2: (15,90) 回答1: Edit: The solution below only applies from a geometrical point of view. Drawing on a screen is different than theoretical geometry, you should listen to the people suggesting Bresenham's algorithm. Given, two points, and knowing that the line's equation is y = m*x + b , where m

问题 These days, I need to draw many images on a canvas. The canvas size is 800x600px, and I have many images of 256x256px(some is smaller) to draw on it, these small images will compose a complete image on the canvas. I have two ways to implement this. First, if I use canvas 2D context, that is context = canvas.getContext('2d') , then I can just use context.drawimage() method to put every image on the proper location of the canvas. Another way, I use WebGL to draw these images on the canvas. On

问题 These days, I need to draw many images on a canvas. The canvas size is 800x600px, and I have many images of 256x256px(some is smaller) to draw on it, these small images will compose a complete image on the canvas. I have two ways to implement this. First, if I use canvas 2D context, that is context = canvas.getContext('2d') , then I can just use context.drawimage() method to put every image on the proper location of the canvas. Another way, I use WebGL to draw these images on the canvas. On

问题 These days, I need to draw many images on a canvas. The canvas size is 800x600px, and I have many images of 256x256px(some is smaller) to draw on it, these small images will compose a complete image on the canvas. I have two ways to implement this. First, if I use canvas 2D context, that is context = canvas.getContext('2d') , then I can just use context.drawimage() method to put every image on the proper location of the canvas. Another way, I use WebGL to draw these images on the canvas. On