canvas

问题 I have a canvas element on the page that is having a circle drawn and moved on it. The circle is being moved by one pixel in every iteration of the loop. Here is the code. function clearPage() { context.clearRect(0,0,300, 150); }; var canvasEl = document.getElementById("main"); var context = canvasEl.getContext('2d'); context.fillStyle = 'red'; context.strokeStyle = 'red'; var x = 0; function moveCircle() { clearPage(); context.arc(x, 75, 20, 0, 2* Math.PI); context.stroke(); x++; window

问题 I have a canvas element on the page that is having a circle drawn and moved on it. The circle is being moved by one pixel in every iteration of the loop. Here is the code. function clearPage() { context.clearRect(0,0,300, 150); }; var canvasEl = document.getElementById("main"); var context = canvasEl.getContext('2d'); context.fillStyle = 'red'; context.strokeStyle = 'red'; var x = 0; function moveCircle() { clearPage(); context.arc(x, 75, 20, 0, 2* Math.PI); context.stroke(); x++; window

问题 I am working on this script where I have x-number bouncing balls (in this case 20 balls) in a canvas. My question is, how do I make them bounce off each other when they hit, as well as bounce off the yellow rectangle when they hit it? var mycanvas =document.getElementById("mycanvas"); var ctx=mycanvas.getContext("2d"); var w=500,h=500; mycanvas.height=h; mycanvas.width=w; var ball=[]; function Ball(x,y,r,c,vx,vy){ this.x=x; //starting x coordinate this.y=y; //starting x coordinate this.r=r; /

问题 I am trying to draw lines with canvas and I am changing the coordinates with a for loop. here is my canvas element: <canvas id="c" width="300px" height="300px"></canvas> and here is the js codes: var c = document.getElementById('c'); ci = c.getContext('2d'); for(var a = 18; a < 300; a +=18){ fnc(a, ci); } function fnc(x, ci){ ci.strokeStyle = 'red'; ci.moveTo(0, x); ci.lineTo(300, x); ci.lineWidth = 0.2; ci.stroke(); } As you can see I am trying to draw these lines with 18px spaces between

问题 I have a canvas as an image viewer. Its background is used to place an image and I'd like to put another image on top of it. So, the scenario is like this: <Canvas Name="VisorCanvas" Height="514" Width="720"> <Canvas.Background> <ImageBrush /> </Canvas.Background> <Image Name="foreground" /> </Canvas> I insert images dynamically in code behind (C#). The problem is that if the image is too big, then the image goes beyond the Canvas's borders. For instance: I have an irrelevant background image

问题 I have a canvas as an image viewer. Its background is used to place an image and I'd like to put another image on top of it. So, the scenario is like this: <Canvas Name="VisorCanvas" Height="514" Width="720"> <Canvas.Background> <ImageBrush /> </Canvas.Background> <Image Name="foreground" /> </Canvas> I insert images dynamically in code behind (C#). The problem is that if the image is too big, then the image goes beyond the Canvas's borders. For instance: I have an irrelevant background image

问题 Is it possible to efficiently modify the html5 canvas from web assembly? Update: var imageData = context.getImageData(x, y, w, h) var buffer = imageData.data.buffer; // ArrayBuffer Could be the way if the buffer is writable. 回答1: No, not in this stage of WebAssembly and web-api development. With context.getImageData you get a new ImageData object with a new buffer which must be copied once again in the memory's buffer of your WebAssembly instance. But if you don't need to read from canvas,

问题 Is it possible to efficiently modify the html5 canvas from web assembly? Update: var imageData = context.getImageData(x, y, w, h) var buffer = imageData.data.buffer; // ArrayBuffer Could be the way if the buffer is writable. 回答1: No, not in this stage of WebAssembly and web-api development. With context.getImageData you get a new ImageData object with a new buffer which must be copied once again in the memory's buffer of your WebAssembly instance. But if you don't need to read from canvas,

问题 I'm currently building a 2D drawing app in WebGL. I want to implement zoom to point under mouse cursor similar to example in here. But I can't figure out how to apply the solution from that answer in my case. I have done basic zoom by scaling camera matrix. But it zooms to the top-left corner of the canvas, due to that being the origin (0,0) set by the projection (as far as I understand). Basic pan & zoom implemented: My draw function (including matrix computations) looks like this: var

问题 I'm currently building a 2D drawing app in WebGL. I want to implement zoom to point under mouse cursor similar to example in here. But I can't figure out how to apply the solution from that answer in my case. I have done basic zoom by scaling camera matrix. But it zooms to the top-left corner of the canvas, due to that being the origin (0,0) set by the projection (as far as I understand). Basic pan & zoom implemented: My draw function (including matrix computations) looks like this: var