canvas——绘制图片

绘制图片（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>

canvas——绘制图片

猜你喜欢