drawImage()方法

drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
          destX, destY, destWidth, destHeight)

drawImage() 方法有 3 个变形。

第一个变形把整个图像复制到画布,将其放置到指定点的左上角,并且将每个图像像素映射成画布坐标系统的一个单元。

第二个变形也把整个图像复制到画布,但是允许您用画布单位来指定想要的图像的宽度和高度。

第三个变形则是完全通用的,它允许您指定图像的任何矩形区域并复制它,对画布中的任何位置都可进行任何的缩放。

传递给 drawImage() 方法的图像必须是 Image 对象或 Canvas 元素。一个 Image 对象能够表示文档中的一个 标记或者使用 Image() 构造函数所创建的一个屏幕外图像。

var cvs=$(‘myCanvas‘);
var cxt=cvs.getContext(‘2d‘);
var img=new Image();
img.src=‘http://b.hiphotos.baidu.com/image/pic/item/bf096b63f6246b606d4f6368e8f81a4c510fa26d.jpg‘;
img.onload=function(){
     cxt.drawImage(img,10,10);
     cxt.drawImage(img,10,10,200,200);
     cxt.drawImage(img,100,100,300,300,10,10,300,300);
}
时间: 2024-10-26 04:40:51

drawImage()方法的相关文章

<canvas>drawImage()方法无法显示图片

在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawimg" width="500" hei

HTML5 Canvas绘图详解 drawImage() 方法 有图有真相!

步骤 1 2 3 4 5 简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. 工具/原料 html script 步骤/方法 最常见的在canvas上画图的方法是使用Image对象.所支持的来源图片格式依赖于浏览器的支持,然而,一些典型的图片格式(png,jpg,gif等)基本上都没有问题. 在下面的所有例子中,图片源将会使用这张256×256尺寸的图片. 绘制图片:在最基本的画

【CITE】DrawImage方法详解(转)

Image和Bitmap类概述 GDI+的Image类封装了对BMP.GIF.JPEG.PNG.TIFF.WMF(Windows元文件)和EMF(增强WMF)图像文件的调入.格式转换以及简单处理的功能.而Bitmap是从Image类继承的一个图像类,它封装了Windows位图操作的常用功能.例如,Bitmap::SetPixel和Bitmap::GetPixel分别用来对位图进行读写像素操作,从而可以为图像的柔化和锐化处理提供一种可能. DrawImage方法 DrawImage是GDI+的Gr

drawImage方法与img的load事件、缓存问题

我们用到canvas的drawImage方法是往往要等图片加载完了执行 $('img').load(function(){ cont_2d.drawImage(img,0,0); }); 然而这种写法会出现问题:页面刷新有事会不显示图片: 这是图片缓存引起的$('img')的load事件没有触发, $('img').one('load' , function(){//单次绑定load事件 cont_2d.drawImage(img,0,0); }).each(function(){ if(thi

html5标签canvas函数drawImage使用方法

html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在canvas中(x,y)处绘制图片. drawImage(image,x,y,width,height):在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,w

html5 绘制图片 drawImage

要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同的参数:? drawImage(image,dx,dy)? drawImage(image,dx,dy,dw,dh)? drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)其中的 image 参数可以是 HTMLImageElement.HTMLCanvasElement 和HTMLVideoElement 中的任一个对象.绘制参数的含义可以参看下图: 异常:如果第一个参数不是指定的元素类型

JavaGraphics类的绘图方法

Graphics类提供基本绘图方法,Graphics类提供基本的几何图形绘制方法,主要有:画线段.画矩形.画圆.画带颜色的图形.画椭圆.画圆弧.画多边形.画字符串等. 1. 画线段:在窗口中画一条线段,可以使用Graphics类的drawLine()方法: /** * 在此图形上下文的坐标系中,使用当前颜色在点 (x1, y1) 和 (x2, y2) 之间画一条线 * * @param x1 * 第一个点的 x 坐标 * @param y1 * 第一个点的 y 坐标 * @param x2 *

Canvas绘图方法和图像处理方法(转)

转自:http://javascript.ruanyifeng.com/htmlapi/canvas.html 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. <canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas!

用JavaScript将Canvas内容转化成图片的方法

上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元装到口袋里,我决定开发一个Instagram风格的应用,这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片格式. 使用JavaScript将图片拷贝进画布 要想将图片放入画布里,我们使用canvas元素的drawImage方法: // Converts i