canvas

来源： https://stackoverflow.com/questions/38196816/apply-and-save-image-effects-on-canvas-javascript

来源： https://stackoverflow.com/questions/38196816/apply-and-save-image-effects-on-canvas-javascript

来源： https://stackoverflow.com/questions/43726544/how-to-call-a-function-using-a-dynamic-name-in-js

来源： https://stackoverflow.com/questions/43726544/how-to-call-a-function-using-a-dynamic-name-in-js

问题 I'm wanting to place font or static images onto the canvas but not sure what the best approach is using Matter.js. Right now, for images, i'm just creating a body with a size of '0' and putting the image url in the render.sprite.texture property. Seems to do the trick but is there a different/better way of putting static images on the canvas? Also, I am putting text onto the canvas using the 'afterRender' event near the top of my scripts, before anything else is created/drawn: _sceneEvents

问题 I'm wanting to place font or static images onto the canvas but not sure what the best approach is using Matter.js. Right now, for images, i'm just creating a body with a size of '0' and putting the image url in the render.sprite.texture property. Seems to do the trick but is there a different/better way of putting static images on the canvas? Also, I am putting text onto the canvas using the 'afterRender' event near the top of my scripts, before anything else is created/drawn: _sceneEvents

问题 I'm trying to build my personal website where I have: A canvas element that's 100% screen height and width, with z-index -1 The normal content in divs and section tags, with z-index 0 The nav element that's at the highest z-index on the page This arrangement allows me to have the canvas as the background of the entire website, it doesn't scroll because it's fixed. The nav is fixed as well so it stays at the top of the page with scrolling. (By "fixed" I mean "position: fixed" set in CSS on

问题 I am trying to draw a line in a canvas. I am trying to make the line moving with time. I am using the following code to do so var ctx = mycanvas.getContext('2d'); ctx.beginPath(); for (var x = 0; x < 200; x++) { setInterval(draw(x, 0, ctx), 3000); x = x++; } And here is the draw function function draw(x, y, ctx) { ctx.moveTo(10 + x, 400); ctx.lineTo(11 + x, 400); ctx.lineWidth = 10; ctx.strokeStyle = "#ff0000"; ctx.stroke(); } But the setInterval() function is not working and the line is

问题 I need to do a svg export png image function. First I generate svg to base64, with the base64 header type too svg+xml , then var image=new Image(); image.src=base64Code; image.onload = function() { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.width; context.drawImage(image, 0, 0); png = canvas.toDataURL("image/png",1); }` My canvas.width / height may be very large. When I use canvas.toDataURL it returns

问题 I need to do a svg export png image function. First I generate svg to base64, with the base64 header type too svg+xml , then var image=new Image(); image.src=base64Code; image.onload = function() { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.width; context.drawImage(image, 0, 0); png = canvas.toDataURL("image/png",1); }` My canvas.width / height may be very large. When I use canvas.toDataURL it returns