绘制图片(drawImage) (重点)
1、基本绘制图片的方式
context.drawImage(img,x,y);
参数说明: x,y 绘制图片左上角的坐标, img是绘制图片的dom对象。
2、 在画布上绘制图像,并规定图像的宽度和高度
context.drawImage(img,x,y,width,height);
参数说明:width 绘制图片的宽度, height:绘制图片的高度
如果指定宽高,最好成比例,不然图片会被拉伸</em>
等比公式: toH = Height * toW / Width; //等比
设置高 = 原高度 * 设置宽/ 原宽度;
3、 图片裁剪,并在画布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明:
sx,sy 裁剪的左上角坐标,
swidth:裁剪图片的高度。 sheight:裁剪的高度
其他同上
4、 用JavaScript创建img对象
第一种方式:
var img = document.getElementById("imgId");
第二种方式:
var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后,执行此方法
1、基本绘制图片的方式
context.drawImage(img,x,y);
参数说明: x,y 绘制图片左上角的坐标, img是绘制图片的dom对象。
2、 在画布上绘制图像,并规定图像的宽度和高度
context.drawImage(img,x,y,width,height);
参数说明:width 绘制图片的宽度, height:绘制图片的高度
如果指定宽高,最好成比例,不然图片会被拉伸</em>
等比公式: toH = Height * toW / Width; //等比
设置高 = 原高度 * 设置宽/ 原宽度;
3、 图片裁剪,并在画布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明:
sx,sy 裁剪的左上角坐标,
swidth:裁剪图片的高度。 sheight:裁剪的高度
其他同上
4、 用JavaScript创建img对象
第一种方式:
var img = document.getElementById("imgId");
第二种方式:
var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后,执行此方法
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制图片</title> </head> <body> <div id="container"> <canvas id="cavsImage"> 您的浏览器不支持canvas,请升级浏览器 </canvas> </div> <script> (function(){ var canvas = document.querySelector('#cavsImage'); var ctx = canvas.getContext('2d'); canvas.width = 600; canvas.height = 600; canvas.style.border = '1px solid #ccc'; //第一步,创建图片的dom对象 var img1 = new Image(); img1.src='images/1.jpg';//只要设置了src属性,当前img对象立即去加载图片。 //第二步,图片加载完成后,把图片绘制到canvas上 img1.onload = function() { ctx.drawImage(img1,30,30); ctx.drawImage(img1,250,30,img1.width*1.2,img1.height*1.2); for(var i=0;i<5;i++){ ctx.drawImage(img1,30+i*20,250+i*20,img1.width*0.8,img1.height*0.8); } //绘制指定的裁剪图片 //图片截取 //参数: 1、图片对象,2、截取图片x坐标,3、截取图片Y坐标 //4、截取图片宽,5、截取图片高, //6、7、绘制图片的X、y坐标, 8、9、绘制图片的宽高 ctx.drawImage(img1,15,70,70,70,350,350,210,210); }; })(); </script> </body> </html>