JavaScript全解析——canvas 绘制图片

ゞ浴缸里的玫瑰 2023-09-27 18:52 145阅读 0赞

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

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

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

![e057dbf52f3d05f1fccb43be7c38fb0a.png][]

●接下来就可以使用 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, 100, 236, 368 )
    }
    
    
    复制代码

![ceab58c1882be16dd81b96e2c52bcfc3.png][]

●这是, 图片就插入到页面上了  
●注意 : 如果你设置的 宽度 和 高度 于图片尺寸不符, 会按照你预设尺寸缩放图片

绘制贝塞尔曲线  
●canvas 中绘制贝塞尔曲线是一个既复杂又简单的工作  
●首先, 我们要知道什么是贝塞尔曲线

了解贝塞尔曲线  
●概念 :  
贝塞尔曲线（Bezier curve）是计算机图形学中相当重要的参数曲线，它通过一个方程来描述一条曲线，根据方程的最高阶数，又分为线性贝赛尔曲线，二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。  
贝塞尔曲线需要提供几个点的参数，首先是 曲线的起点和终点  
如果控制点数量为 0，我们称之为线性贝塞尔；  
控制点数量为 1，则为二阶贝塞尔曲线；  
控制点数量为 2，则为三阶贝塞尔曲线，依此类推。  
●我们比较常用到的就是 二阶 和 三阶, 其他的比较少  
●更复杂一些的贝塞尔曲线, 我们就需要借助工具来进行测算了  
●先来看二阶贝塞尔曲线  
○其实就是由 三个点 绘制成两个直线  
○然后我们会同时从每条直线的起点开始，向终点移动按比例拿到一个点。然后将这些点再连接，产生 n - 1 条直线。  
○就这样，我们继续同样的操作的，直到变成一条直线，然后我们按比例取到一个点，这个点就是曲线经过的点。  
○当我们比例一点点变大（从 0 到 1），就拿到了曲线中间的所有点，最终绘制出完整的曲线。

![6ce6d8698db6cacc59a86c8a65898dee.gif][]

●再来看看三阶贝塞尔曲线  
○和二阶贝塞尔曲线是一个道理, 只不过控制点数量变成了两个

![f8212ed8f30607f957313b5454b0eb13.gif][]

●这个东西看起来好难  
●但是其实绘制的时候不需要我们来逐个点的计算, canvas 给我们提供了对应的 API

绘制二阶贝塞尔曲线  
●我们先用 canvas 的内的线段来描述一个二阶贝塞尔曲线的形状

![999deefa22cf75d937adf522a94b3ed6.png][]

●这就是我们预设的三个点位描绘出来的一个夹角  
●接下来我们在这个基础上绘制贝塞尔曲线

// 0. 获取到页面上的 canvas 标签元素节点
    const canvasEle = document.querySelector('#canvas')
    
    // 1. 获取当前这个画布的工具箱
    const ctx = canvasEle.getContext('2d')
    
    // 2. 描绘测定贝塞尔曲线的线段形状
    ctx.moveTo(20, 170)
    ctx.lineTo(130, 40)
    ctx.lineTo(180, 150)
    ctx.stroke()
    
    // 3. 绘制二阶贝塞尔期限
    ctx.beginPath()
    ctx.moveTo(20, 170) // 起点, 描绘 p0 点位
    // 语法 : ctx.quadraticCurveTo(p1 x坐标, p1 y坐标, p2 x坐标, p2 y坐标)
    ctx.quadraticCurveTo(130, 40, 180, 150)
    ctx.strokeStyle = 'red'
    ctx.stroke()
    
    
    复制代码

![3e6dabb2a0c73d2661bcb1bc75afec7d.png][]

●这条红色的曲线, 就是一个二阶贝塞尔曲线  
●这个时候把我们预设的用来观察的线段取消掉就好了

// 0. 获取到页面上的 canvas 标签元素节点
    const canvasEle = document.querySelector('#canvas')
    
    // 1. 获取当前这个画布的工具箱
    const ctx = canvasEle.getContext('2d')
    
    // 2. 绘制二阶贝塞尔期限
    ctx.beginPath()
    ctx.moveTo(20, 170) // 起点, 描绘 p0 点位
    // 语法 : ctx.quadraticCurveTo(p1 x坐标, p1 y坐标, p2 x坐标, p2 y坐标)
    ctx.quadraticCurveTo(130, 40, 180, 150)
    ctx.strokeStyle = 'red'
    ctx.stroke()
    
    
    复制代码

![e2ec0fb4f10b23fd8d2c0a5d88c8e6b6.png][]

绘制三阶贝塞尔曲线  
●其实和二阶贝塞尔曲线一样, 只不过是我们描述的点位变多了一个而已  
●和刚才一样, 我们还是先来描述一个预设线段, 用于观察

![f82451419100c2203408275aa3a1eaea.png][]

●接下来按照我们预设好的点位开始绘制三阶贝塞尔曲线

// 0. 获取到页面上的 canvas 标签元素节点
    const canvasEle = document.querySelector('#canvas')
    
    // 1. 获取当前这个画布的工具箱
    const ctx = canvasEle.getContext('2d')
    
    // 2. 描绘测定贝塞尔曲线的线段形状
    ctx.moveTo(25, 175)
    ctx.lineTo(60, 80)
    ctx.lineTo(150, 30)
    ctx.lineTo(170, 150)
    ctx.stroke()
    
    // 3. 根据上述描述路径绘制三阶贝塞尔曲线
    ctx.beginPath()
    ctx.moveTo(25, 175) // 起点, 描述 p0 点位
    // 语法 : ctx.bezierCurveTo(p1 x, p1 y, p2 x, p2 y, p3 x, p3 y)
    ctx.bezierCurveTo(60, 80, 150, 30, 170, 150)
    ctx.strokeStyle = 'red'
    ctx.stroke()
    
    
    复制代码

![dad701e1994e129f3627959c8e78f396.png][]

●这时一个三阶贝塞尔曲线就出现了  
●是不是还挺简单的

[e057dbf52f3d05f1fccb43be7c38fb0a.png]: https://img-blog.csdnimg.cn/img_convert/e057dbf52f3d05f1fccb43be7c38fb0a.png
[ceab58c1882be16dd81b96e2c52bcfc3.png]: https://img-blog.csdnimg.cn/img_convert/ceab58c1882be16dd81b96e2c52bcfc3.png
[6ce6d8698db6cacc59a86c8a65898dee.gif]: https://img-blog.csdnimg.cn/img_convert/6ce6d8698db6cacc59a86c8a65898dee.gif
[f8212ed8f30607f957313b5454b0eb13.gif]: https://img-blog.csdnimg.cn/img_convert/f8212ed8f30607f957313b5454b0eb13.gif
[999deefa22cf75d937adf522a94b3ed6.png]: https://img-blog.csdnimg.cn/img_convert/999deefa22cf75d937adf522a94b3ed6.png
[3e6dabb2a0c73d2661bcb1bc75afec7d.png]: https://img-blog.csdnimg.cn/img_convert/3e6dabb2a0c73d2661bcb1bc75afec7d.png
[e2ec0fb4f10b23fd8d2c0a5d88c8e6b6.png]: https://img-blog.csdnimg.cn/img_convert/e2ec0fb4f10b23fd8d2c0a5d88c8e6b6.png
[f82451419100c2203408275aa3a1eaea.png]: https://img-blog.csdnimg.cn/img_convert/f82451419100c2203408275aa3a1eaea.png
[dad701e1994e129f3627959c8e78f396.png]: https://img-blog.csdnimg.cn/img_convert/dad701e1994e129f3627959c8e78f396.png