前端大佬必备——Canvas( 二 )


前端大佬必备——Canvas文章插图
3.2 绘制图片一旦获得了源图对象 , 我们就可以使用 drawImage 方法将它渲染到 canvas 里 。 drawImage 方法有三种形态 , 下面是最基础的一种 。
drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象 , x 和 y 是其在目标 canvas 里的起始坐标 。
drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数 。
drawImage(image, x, y, width, height)
这个方法多了2个参数:width 和 height , 这两个参数用来控制 当向canvas画入时应该缩放的大小
drawImage 方法的第三个也是最后一个变种有8个新参数 , 用于控制做切片显示的 。 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)第一个参数和其它的是相同的 , 都是一个图像或者另一个 canvas 的引用 。 其它8个参数最好是参照右边的图解 , 前4个是定义图像源的切片位置和大小 , 后4个则是定义切片的目标显示位置和大小 。
前端大佬必备——Canvas文章插图
前端大佬必备——Canvas文章插图
【总结】希望通过以上的内容可以让您学习到更多的知识 , 接下来不喜欢看文章的小伙伴们有口福了我们还有视频教程等着你来学习哦~
点击下方的链接学习起来吧


推荐阅读