前端大佬必备——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个则是定义切片的目标显示位置和大小 。
文章插图
文章插图
【总结】希望通过以上的内容可以让您学习到更多的知识 , 接下来不喜欢看文章的小伙伴们有口福了我们还有视频教程等着你来学习哦~
点击下方的链接学习起来吧
推荐阅读
- 计算机专业大三学生,如果想主攻前端开发,该重视哪些内容
- NVIDIA Broadcast体验 主播必备30系显卡
- 互联网大佬集体“哑火”?马云、刘强东变低调,只有他依旧活跃
- 小米11必备!小米55W充电器开始预约:仅99元
- 普通大学计算机专业的本科生,该选择主攻前端还是Java
- 新能源大佬也自燃?拆开自燃特斯拉,7千多节5号电池映入眼帘
- 中国纳米谷首个投试产项目来了!助力解决5G通信射频前端卡脖子问题
- 6纳米!我国芯片巨头官宣,推出高端射频前端模组!
- 冬季室内空气污染比你想象更严重!创业必备空气净化器导购推荐
- 商界大佬曾预言,50%将会被AI淘汰,这3大职业最容易被取代