关于前端: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, 100, 236, 368)
}

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

绘制贝塞尔曲线
●canvas 中绘制贝塞尔曲线是一个既简单又简略的工作
●首先, 咱们要晓得什么是贝塞尔曲线

理解贝塞尔曲线
●概念 :
贝塞尔曲线（Bezier curve）是计算机图形学中相当重要的参数曲线，它通过一个方程来形容一条曲线，依据方程的最高阶数，又分为线性贝赛尔曲线，二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。
贝塞尔曲线须要提供几个点的参数，首先是 曲线的终点和起点
如果控制点数量为 0，咱们称之为线性贝塞尔；
控制点数量为 1，则为二阶贝塞尔曲线；
控制点数量为 2，则为三阶贝塞尔曲线，依此类推。
●咱们比拟罕用到的就是 二阶 和 三阶, 其余的比拟少
●更简单一些的贝塞尔曲线, 咱们就须要借助工具来进行测算了
●先来看二阶贝塞尔曲线
○其实就是由 三个点 绘制成两个直线
○而后咱们会同时从每条直线的终点开始，向起点挪动按比例拿到一个点。而后将这些点再连贯，产生 n – 1 条直线。
○就这样，咱们持续同样的操作的，直到变成一条直线，而后咱们按比例取到一个点，这个点就是曲线通过的点。
○当咱们比例一点点变大（从 0 到 1），就拿到了曲线两头的所有点，最终绘制出残缺的曲线。

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

●这个货色看起来好难
●然而其实绘制的时候不须要咱们来一一点的计算, canvas 给咱们提供了对应的 API

绘制二阶贝塞尔曲线
●咱们先用 canvas 的内的线段来形容一个二阶贝塞尔曲线的形态

●这个货色看起来好难
●然而其实绘制的时候不须要咱们来一一点的计算, canvas 给咱们提供了对应的 API

绘制二阶贝塞尔曲线
●咱们先用 canvas 的内的线段来形容一个二阶贝塞尔曲线的形态

// 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()

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

// 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()

●这条红色的曲线, 就是一个二阶贝塞尔曲线
●这个时候把咱们预设的用来察看的线段勾销掉就好了

// 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()

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

// 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()

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

// 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()

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