JavaScript全解析——canvas 绘制图片

●在 canvas 内也是可以直接插入一个图片的
●如果在 canvas 内想插入一个图片
○首先要用 js 加载一个图片
○当图片加载完毕以后, 我们在用 canvas 的 API 把它插入到画布上即可
●先用 js 加载一张图片出来

const myImg = new Image()
myImg.sec = './01小锋.png'
// 准备一个加载完毕的事件
myImg.onload = function () {
    console.log(this) // 这里的 this 就是这个图片的内容
}


复制代码

○这样我们就得到了一个图片内容
○这个可是 JS 的语法哦, 和 canvas 没有关系

●接下来就可以使用 canvas 的 API 把这个加载好的图片插入到画布上了
●语法 : 工具箱.drawImage( 图片内容, 起点 x 坐标, 起点 y 坐标, 宽度, 高度 )

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 加载图片
myImg.sec = './01小锋.png'
// 准备一个加载完毕的事件
myImg.onload = function () {
    console.log(this) // 这里的 this 就是这个图片的内容
    
    // 3. 插入到画布内
    ctx.drawImage( this, 100