本篇文章给人人带来的内容是关于HTML5 Canvas绘图之drawImage() 要领的细致引见（代码示例），有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你有所协助。

是一个新的HTML元素，这个元素能够被Script言语(通常是JavaScript)用来绘制图形。比方能够用它来绘图、合成图象、或做简朴的(和不那么简朴的)动画。

1、最常见的在canvas上绘图的要领是运用Image对象。所支撑的泉源图片格式依赖于浏览器的支撑，但是，一些典范的图片格式(png，jpg，gif等)基础上都没有题目。
2、鄙人面的一切例子中，图片源将会运用这张200×200尺寸的图片。

3、绘制图片：在最基础的绘图操纵中，你须要的只是愿望图象涌现处的位置(x和y坐标)。图象的位置是相对于其左上角来推断的。运用这类要领，图象能够简朴的以其原尺寸被画在画布上。
4、代码以下：

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5、图片变形：转变图象的尺寸，你须要运用重载的drawImage函数，供应给它愿望的宽度和高度参数。
6、代码以下：

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7、图片裁剪:drawImage要领的功用是对图象举行裁剪。drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
8、参数许多，但基础上你能够把它想成从原图中掏出一个矩形地区，然后把它画到画布上目的地区里。
9、代码以下：
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10、这些就是HTML5中的canvas(画布)标记里举行绘图和处置惩罚图象的基础操纵。

专栏
文章概况

红枫叶 1 关注作者

52 分钟前宣布

HTML5 Canvas绘图详解 drawImage() 要领

javascript
html5

16 次浏览 · 读完须要 5 分钟

简介
是一个新的HTML元素，这个元素能够被Script言语(通常是JavaScript)用来绘制图形。比方能够用它来绘图、合成图象、或做简朴的(和不那么简朴的)动画。

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5、图片变形：转变图象的尺寸，你须要运用重载的drawImage函数，供应给它愿望的宽度和高度参数。
6、代码以下：

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10、这些就是HTML5中的canvas(画布)标记里举行绘图和处置惩罚图象的基础操纵。