canvas

问题 I have data from 2d image in a 1D array, plot is perfect but I would like to reverse y axis. I saw tips with ctx.transform but it doesn't seems to work on this example: https://jsfiddle.net/92j9r2j4/2/ Z array just for example, Z[n*n-1] is used to mark the corner. 回答1: ctx.putImageData is not affected by transform. The image data functions getImageData and putImageData are not affected by the current transform. They are memory blit (move) functions not graphical functions. You have several

问题 I want check whether a point(x,y) is in a particular area on a canvas. For example if I have an area of 100X100 on an html canvas, then i want to find that whether a point (x, y) lies inside this area or it is outside the area. This detection is to be done using javascript and jquery. Thanx. 回答1: depends on what use case you need it for: MouseOver/Click: as long as your canvas is the only thing with moving elements and you DO NOT need support for safari / iOS an good ol' fashioned image map

问题 I am using html2canvas library to take screenshot of html view. but background-image failed to load. i am getting error message Error loading background: here is my JSFiddle. window.takeScreenShot = function() { html2canvas(document.getElementById("target"), { onrendered: function (canvas) { document.body.appendChild(canvas); }, useCORS:true, logging:true, allowTaint:true }); } #target{ width:300px; height:160px; background:lightblue; color:#fff; padding:10px; background-image: url(https:/

问题 I have modified some code of Fabric.text to get arc shape of text . But the problem is toSVG() is rendering the plain text instead of arc text. How can i render it properly. https://i.stack.imgur.com/A3bnx.png (Rendering Canvas) https://i.stack.imgur.com/R4cY0.png (Exported SVG) If there is an alternative way to print in svg then let me know. _renderText: function(ctx) { this._translateForTextAlign(ctx); /* this._renderTextFill(ctx);*/ this._getCircularText(ctx) /* this._renderTextStroke(ctx)

问题 I draw canvas and I draw inside it some shape and text bar , I would like when I click on the second shape the small rectangle that the canvas becomes full of the screen with the moving tape and the small rectangle and when I press it again it when it full screen returns as before var pointX, pointY , w , h ; var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); c.width = 1000; c.height = 650; ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height); function drawShape1(){

问题 I have got a simple code and i want create mask for the player. ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(level1, 0, 0); ctx.save(); ctx.fillRect(0,0,mask.width,mask.height); ctx.globalCompositeOperation="source-in"; ctx.drawImage(hero,0,0); ctx.restore(); But globalCompositeOperation affected level backgorund. It considers level1 backround is mask two. How can this problem be solved? Thanks. 回答1: Hard to tell what you want. // clear the whole canvas ctx.clearRect(0, 0,

问题 I have a gradient that I need to apply to a canvas. section { width: 440px; height: 171px; background-image: linear-gradient(185deg, #39adb2 0%, rgba(255, 255, 255, 0.24) 100%), linear-gradient(to top, rgba(152, 227, 230, 0.18) 0%, rgba(196, 229, 255, 0) 99%, rgba(196, 229, 255, 0) 100%); opacity: 0.48; } <section></section> I need help to convert this to the canvas API; I don't have a clue how to do it. maybe there is an online tool? var gradientFill = ctx.createLinearGradient(100, 10, 100,

问题 Here is my JS code : UTIF._imgLoaded = function(e) { var page = UTIF.decode(e.target.response)[0], rgba = UTIF.toRGBA8(page), w=page.width, h=page.height; var string = rgba.join(); console.log("rgba : ", rgba); var ind = UTIF._xhrs.indexOf(e.target), img = UTIF._imgs[ind]; UTIF._xhrs.splice(ind,1); UTIF._imgs.splice(ind,1); var cnv = document.createElement("canvas"); cnv.width=w; cnv.height=h; var ctx = cnv.getContext("2d"), imgd = ctx.createImageData(w,h); for(var i=0; i<rgba.length; i++)

问题 I am trying making a collecting game. It's still in a work in progress. What I am trying to accomplish is add collision detection to the rectangle on the canvas so the sprite won't be able to phase through it. I know how to add collision so my sprite won't leave the canvas. My rectangles are on different points of the canvas and they do vary by size. I am wondering how I should go about doing that? Also, totally optional, how should I go about having it so the player has to collect all the

问题 In the following example I've set the opacity of every image pixel to zero. Why isn't the grey background rectangle visible and how can I achieve that? Am I missing something in the rendering process of the shape vs image data? <!DOCTYPE html> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <body> <canvas id='myCanvas'></canvas> </body> <script type="text/javascript"> var width = 500; var height = 500; var canvas = document.getElementById('myCanvas') context =