drawimage | 易学教程

canvas的drawImage方法参数详解

阅读更多关于 canvas的drawImage方法参数详解

HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型： drawImage(image, dx, dy) 在画布指定位置绘制原图 drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分：参数描述 img 规定要使用的图像、画布或视频 sx 可选。开始剪切图片的 x 坐标位置 sy 可选。开始剪切图片的 y 坐标位置 sw 可选。被剪切图像的宽度（就是裁剪之前的图片宽度，这里的宽度若小于图片的原宽。则图片多余部分被剪掉；若大于，则会以空白填充） sh 可选。被剪切图像的高度（就是裁剪之前的图片高度） dx 在画布上放置图像的 x 坐标位置 dy 在画布上放置图像的 y 坐标位置 dw 可选。要使用的图像的宽度（就是裁剪之后的图片高度，放大或者缩放） dh 可选。要使用的图像的高度（就是裁剪之后的图片高度，放大或者缩放）第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数

HTML5 Canvas replace to <div>

阅读更多关于 HTML5 Canvas replace to

问题 I'm trying replace HTML5 Canvas to simple <div> But I don't know how to replace this line: ctx.drawImage(tileImg[drawTile],xpos,ypos); Maybe anyone have idea how to replace this into <div> ? example : http://jsfiddle.net/HDpMW/5/ (this code from glacialflame.com) 回答1: Use <img> elements, and append them dynamically like this: http://jsfiddle.net/HDpMW/6/ var elem = document.createElement('img'); elem.src = tileDict[drawTile]; elem.style.position = 'absolute'; elem.style.left = xpos + 'px';

HTML5 Canvas DrawImage Stutter / Choppiness

阅读更多关于 HTML5 Canvas DrawImage Stutter / Choppiness

问题 PROBLEM I am trying to get an image on a canvas to move from left to right smoothly. It's not too bad on Chrome/Safari (still stutters a little), but there is noticeable stutter in Firefox on multiple machines (tried on Windows and Mac). I'm a bit stumped as to how to solve this. WHAT I TRIED I am using requestAnimationFrame instead of setTimeout. I am using clearRect instead of setting the canvas width, though I am clearing the entire canvas instead of the minimum bounding box as I wanted to

A reusable function to clip images into polygons using html5 canvas

阅读更多关于 A reusable function to clip images into polygons using html5 canvas

问题 Guess the title of the post may need editing, but for now I don't know where the problems are. I have read pages and answers to similar questions, here and elsewhere. One Stack Overflow answer is especially close, but I don't understand it. I want a function, to draw polygons on canvas at desired coordinates and to fill them with some background image loaded from a file (large enough that no tiling is needed). Triangles would be fine for a test. Apparently I should use drawImage and clip, and

How to see BufferedImage in JPanel?

阅读更多关于 How to see BufferedImage in JPanel?

问题 I'm building a PongClone but I encounter a bug. **I think the bug is cause by JPanel. I tried the Image instead of BufferedImage. I tried the drawImage outside the paintComponent method. I create to another panel and then add that panel inside a mainpanel. Menu Class package me.pong; import javax.swing.*; public class TestMenu { JFrame frame; public void createFrame () { TestMain main = new TestMain (); frame = new JFrame("TEST"); frame.setSize (800, 450); frame.setDefaultCloseOperation

javascript loaded image is blurry (PNG)

阅读更多关于 javascript loaded image is blurry (PNG)

问题 I am working on a school project (only couple months of JS knowledge), and i stumbled upon this problem with drawing sprites on my canvas. To draw i use these bits of code. treeImage = new Image(); treeImage.src = "sprites/treeSprites.png"; function rocks() { //to create the rock this.x = 1920 * Math.random(); //random location on the width of the field this.y = ground[Math.round(this.x/3)]; //ground is an array that stores the height of the ground this.draw = function() { ctx.save(); ctx

DrawImage with IndexColorModel with transparency

阅读更多关于 DrawImage with IndexColorModel with transparency

问题 Here’s my problem : I would like to apply transformations (translate + rotate + clip) on a BufferedImage based on an IndexColorModel with transparency ( index 0 is my transparent pixel, index 1 is black, index 2 is white, and so on…) The source image (ie, before transformations) is instantiated as this and then, valuated by reading data from a file: // Color Model IndexColorModel cm; cm = new IndexColorModel(7, length, colors[0], colors[1], colors[2], 0); // Source image. BufferedImage source

Poor quality of png images drawn into html canvas

阅读更多关于 Poor quality of png images drawn into html canvas

问题 I am trying to draw png image into the canvas, but the quality is really poor. I am doing that using the drawImage method: src = folder+self.cur+".png"; imageObj.src = src; imageObj.onload = function() { context.clearRect(0, 0, cv, ch), context.drawImage(imageObj, 0, 0, cv, ch) }; Attached is an original image and the screenshot of the result in the canvas. For now canvas dimensions are the same as the image, so the problem is not caused by the resizing. Any ideas what is causing this issue

When I paint a background image onto a JPanel, it behaves different under Windows than it does under Linux

阅读更多关于 When I paint a background image onto a JPanel, it behaves different under Windows than it does under Linux

问题 I'm developing a program for work (notice: I can not share complete code, as it is in large part protected work product, but I will share everything I can). In the application, I have JPanels that have background images applied to them. Some of these panels also have mouse listeners attached & my management wants there to be a visual clue that the panel can be clicked on to initiate an action. To that end, I've overlaid a transparent JPanel on top of the JPanel with the background image, and

GDI+ DrawImage of a JPG with white background is not white

阅读更多关于 GDI+ DrawImage of a JPG with white background is not white

问题 I am displaying a JPG in a C++ CWnd window using GDI+. The JPG has a pure white background, 0xffffff, but when displayed using graphics.DrawImage, the background is off-white with a mix of pixel colors such as 0xfff7f7, 0xf7fff7, 0xf7f7f7. Below is the code, I have tried various settings such as CompositingMode, SmoothingMode, etc. The image is not scaled. The weird thing is that the background color is different depending on other non-white content in the image. If I make a simple all white