JavaScript全解析——canvas 绘制图片

最新推荐文章于 2024-09-23 08:52:09 发布

千锋IT教育

最新推荐文章于 2024-09-23 08:52:09 发布

阅读量2.2k

点赞数

分类专栏： JavaScript全解析专栏文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/longz_org_cn/article/details/130499131

版权

本文详细介绍了如何在canvas中插入和绘制图片，包括加载图片、使用canvas API进行绘制的方法。此外，还深入讲解了贝塞尔曲线的概念，区分了线性、二次和三次贝塞尔曲线，并展示了如何利用canvas API轻松绘制二阶和三阶贝塞尔曲线。

摘要由CSDN通过智能技术生成

●在 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