正文
canvas的图片绘制案例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
</div>
<script>
(function(){
var canvas=document.querySelector('#cavsElem');
var ctx=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
canvas.strokeStyle='1px solid #000';
var img=new Image();
img.src='a.jpg';
img.onload=function(){
var ow=img.width;
var oh=img.height;
// context.drawImage(img,x,y,width,height);
// 参数说明：width 绘制图片的宽度， height：绘制图片的高度
// 如果指定宽高，最好成比例，不然图片会被拉伸</em>
// 等比公式： toH = Height * toW / Width; //等比
// 设置高 = 原高度 * 设置宽/ 原宽度;
ctx.drawImage(img,100,100,400,400*oh/ow);
};
var img2=new Image();
img2.src='gameImgs/DMMban.png';
img2.onload=function(){
// context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// 参数说明：
// sx,sy 裁剪的左上角坐标，
// swidth：裁剪图片的高度。 sheight:裁剪的高度
// 其他同上
ctx.drawImage(img2,40,65,40,65,315,295,40,65);
}
}());
</script>
</body>
</html>
