canvas | 易学教程

WinRT: How do I ensure Images are drawn in a pixel-perfect way on a Canvas?

阅读更多关于 WinRT: How do I ensure Images are drawn in a pixel-perfect way on a Canvas?

问题 I am adding Image instances to a Canvas in Windows Runtime environment and my image keeps getting scaled up when in 140 and 180 scale resolution displays, it looks perfect in scale resolution 100. I tried creating 3 PNG images, one for each scale size: 100, 140, 180 but it still scales them up and they look blurry. I created a test image with 4 black pixels on a cyan background and I took a screenshot from the simulator, see how the image is blurry, my original image has just 4 perfect black

html -split a page into desired shapes as divs?

阅读更多关于 html -split a page into desired shapes as divs?

问题 I'm trying to split a page into different shapes, as shown in this image: The problem is I'm trying to create divs as the shapes in the image so I can put content in them and by changing the css styles change their colors and give them effects with JavaScript, Searching the net I did come across some sites like CSS Tricks to create CSS Triangles, but that's not exactly what I want because I cant put content in such a div and cant get exactly the shapes I need, I was thinking maybe I could get

Two different image onLoad

阅读更多关于 Two different image onLoad

问题 Currently I only have one image onLoad everytime when i run my animation. var imgFish = new Image(); imgFish.onload = init; imgFish.src = 'Image'; I'm try to make two or more different image to load at the same time. I have only one orange fish moving on the canvas when i press on the 'Add a fish!' button. I want to make more different fish swimming on the canvas too. I have created another button called 'Add a different color fish!', I want to add a fish but with a different image with the

Apply existing reference to CanvasRendingContext2D to an element

阅读更多关于 Apply existing reference to CanvasRendingContext2D to an element

问题 I am trying to store a canvas reference in a global object and then apply that reference to an element instead of regenerating the canvas. here is my existing code. I hope that makes sense. thanks in advance! waveformCache is assumed to be a global var cL = document.getElementById('track' + trackId + 'WaveformL'); var cR = document.getElementById('track' + trackId + 'WaveformR'); if (waveformCache.hasOwnProperty(track.path)) { var waveformCacheItem = waveformCache[track.path]; if

Apply existing reference to CanvasRendingContext2D to an element

阅读更多关于 Apply existing reference to CanvasRendingContext2D to an element

Arrow is not drawn correctly on fabricJS canvas

阅读更多关于 Arrow is not drawn correctly on fabricJS canvas

问题 I'm working on a project in which several shapes (rectangle, triangle, ellipse, ..) can be drawn on a fabricJS canvas. Now I'm implementing the functionality to draw an arrow. This arrow consists out of two shapes, a line and a triangle (arrow head). They are added to the canvas as a group object but the problem is that the arrow is not drawn correctly on the canvas. (see this picture ). Below is my code to draw the arrow: drawShape: function(canvas, shape) { let selectedShape; let pointer,

OSMDroid PathOverlay drawing is corrupted at high zoom levels

阅读更多关于 OSMDroid PathOverlay drawing is corrupted at high zoom levels

问题 I'm using OSMdroid to implement a mapping application. I have implemented a custom MapTileProvider that uses a tile source that allows zoom levels up to 22. The default MAPNIK provider only allows zooms to level 18. The problem is that any PathOverlay instances draw perfectly until zoom level 19, but then are not drawn properly at zoom level 20-22. it looks like someone's rubbed out the path with an eraser over 90% of the path length (see screenshots below). I've stepped through the draw()

How to set size of webview in WallpaperService?

阅读更多关于 How to set size of webview in WallpaperService?

问题 I'm trying to set webview as a live wallpaper, but I have a problem with sizing it. In the Engine I create a webview with WallpaperService's Context: public WallpaperEngine(Context context) { webView = new WebView(context); ... } And I draw it to wallpaper's canvas: SurfaceHolder holder = getSurfaceHolder(); Canvas canvas = null; try { canvas = holder.lockCanvas(); if (canvas != null) { webView.draw(canvas); } } finally { if (canvas != null) holder.unlockCanvasAndPost(canvas); } But the

Canvas三次贝塞尔曲线-15

阅读更多关于 Canvas三次贝塞尔曲线-15

js部分： window.onload = function (params) { // 得到绘制源 var c = document.getElementById('canvas'); // 创建画布，建立二维视角 var ctx = c.getContext('2d'); /* 右耳朵 */ // 创建渐变色(x,y,x1,y1)坐标线条衍变 var grd = ctx.createLinearGradient(50,60,100,0); grd.addColorStop(0,'red'); grd.addColorStop(1,'blue'); ctx.fillStyle = grd; ctx.beginPath(); ctx.moveTo(200,20); //三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。 // ctx.bezierCurveTo(200,80,180,235,20,20); ctx.bezierCurveTo(20,80,100,235,200,20); ctx.stroke(); ctx.fill(); /* 左耳朵 */ var grd = ctx

Javascript Canvas Image onclick not working

阅读更多关于 Javascript Canvas Image onclick not working

问题 I am failing at getting a DOM Image onclick event to work. var context = document.getElementById('canvas').getContext('2d'); var image = new Image(); image.src = "foo.png" image.onclick = function(e) { console.log("clicked"); } setInterval(function() { context.drawImage(image, 100, 100, 50, 50); }; Why do I not get the log message when i click on the image. In developer tools i can see the onclick function is not null for the image. 回答1: Yes, what Musa said...and a few other things. Some