绘制图片(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() {
//图片加载完成后,执行此方法
}
<!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>