绘制图像_图像切片

• ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

  • img：图像数据，可以是<img>元素，也可以是<canvas>元素·

  • sx：图像源被切的开始位置的横坐标

  • sy：图像源被切的开始位置的纵坐标

  • sWidth：图像源被切的宽度

  • sHeight：图像源被切的高度

  • dx：图像在画布的开始位置的横坐标

  • dy：图像在画布的开始位置的纵坐标

  • dWidth：图像在画布的宽度

  • dHeight：图像在画布的高度

  第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。

  剩余的8个参数前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

xxxxxxxxxx
        //    定义图片
        var img = new Image()
        img.src = './assets/2.jpg'

        // 图片加载完成后绘制图像
        img.onload = function () {
            // 绘制图像
            // 从源图片(50,50)的位置开始切片，切片大小为50*50
            //切片在画布上的起始位置为(100,100)，切片在画布上最终画出            //来的大小为200*200
            ctx.drawImage(img, 50, 50, 50, 50, 100, 100, 200, 200)
        }
        //绘制矩形
        ctx.lineWidth = 30
        ctx.strokeStyle = 'yellow'
        ctx.strokeRect(100, 100, 200, 200)

实时效果反馈

1.下列描述错误的是：

A ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)也有可能存在缩放

B ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight),sWidth跟dWidth不相等的时候不会产生缩放

答案

1=>B