共计 4257 个字符，预计需要花费 11 分钟才能阅读完成。
绘制变换
●在 cancas 内, 也能够向 css 中一样, 呈现一些 2d 变换的成果
●先来绘制一个根本矩形
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 绘制一个填充矩形
ctx.fillRect(100, 100, 200, 100)绘制位移
●能够将你要绘制的内容进行位移操作
●语法 : 工具箱.transform(x 方向位移尺寸, y 方向位移尺寸)
●留神 : 肯定要先设置地位在进行填充或者描边的操作
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 进行位移设置
ctx.translate(50, 50)
// 3. 绘制一个填充矩形
ctx.fillRect(100, 100, 200, 100)绘制缩放
●能够将你要绘制的图形进行缩放操作
●语法 : 工具箱.scale(x 轴方向缩放, y 轴方向缩放)
●留神 : 肯定要先设置缩放在进行填充或者描边的操作
●留神 : canvas 的缩放不仅仅是对内容的缩放, 更是对画布的缩放
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 进行位移设置
ctx.scale(2, 2)
// 3. 绘制一个填充矩形
ctx.fillRect(100, 100, 200, 100)●咱们会发现他曾经出界了
因为咱们原先预设的 100 100 的坐标地位开始
这个画布放大了, 那么就相当于在 200 200 的地位开始了这个矩形
咱们预设的 200 * 100 的矩形
变成了 400 * 200 的矩形
绘制旋转
●能够将你要绘制的内容进行旋转操作
●语法 : 工具箱.rotate(旋转的弧度)
●留神 : 肯定要先设置缩放在进行填充或者描边的操作
●留神 : canvas 中的旋转中心点只能是画布的左上角, 相当于是在旋转画布
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 进行旋转, 因为是弧度, 换算当前是 30deg 角度
ctx.rotate(Math.PI / 180 * 30)
// 3. 绘制一个填充矩形
ctx.fillStyle = '#000'
ctx.fillRect(100, 100, 200, 100)●可能不太好看的进去是如何计算的 30deg
●看看上面这个例子
●这样可能就更明确了一些
绘制突变
●canvas 中也是能够绘制突变色彩的
●而且绝对比较简单, 咱们只须要制订好突变计划即可
线性突变
●要实现一个线性突变
○要现制订一个突变计划
○向突变计划内填充色彩
●而后咱们在填充或者描边的时候, 应用这个突变计划即可
●指定突变计划
○语法 : 工具箱.createLinearGranient(终点 x 坐标, 终点 y 坐标, 起点 x 坐标, 起点 y 坐标)
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 制订突变计划
// 2-1. 生成一个突变计划
const linearGradient = ctx.createLinearGradient(100, 100, 500, 200)○留神 : 这个坐标地位都是以画布原点开始计算的
○这时是看不到突变色彩的, 因为咱们还没有增加突变色彩
○依据咱们下面的预设, 这个红框圈进去的地位才是实在的残缺突变
○超出红框的地位会主动填充
■左侧超出的全副是开始突变的色彩
■右侧超出的全副是完结突变的色彩
■高低超出的依照突变方向进行对立调整
●接下来咱们来给这个突变计划增加一些突变的色彩
○语法 : 突变计划.addColorStop(地位, 色彩)
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 制订突变计划
// 2-1. 生成一个突变计划
const linearGradient = ctx.createLinearGradient(100, 100, 500, 200)
// 2-2. 增加突变色彩
linearGradient.addColorStop(0, 'red')
linearGradient.addColorStop(1, 'orange')○这里的地位关系是从 0 到 1, 0 示意指定范畴开始坐标, 1 示意指定范畴完结坐标○咱们就从红色突变过渡到橘黄色
○目前咱们的突变色彩还是没有呈现在画布上, 这个是我模仿的模式
○其实只有咱们确定的, 100 100 到 500 200 的地位(黑框圈进去) 是一个残缺突变
○超出的地位都是由 canvas 主动判断填充的色彩
●当初, 这个突变计划就实现了
●剩下的就是应用这个突变计划了
●间接把突变计划设置给 fillStyle 或者 strokeStyle 就能够了
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 制订突变计划
// 2-1. 生成一个突变计划
const linearGradient = ctx.createLinearGradient(100, 100, 500, 200)
// 2-2. 增加突变色彩
linearGradient.addColorStop(0, 'red')
linearGradient.addColorStop(1, 'orange')
// 3. 绘制一个矩形
// 3-1. 设置填充矩形的填充色彩, 应用突变
ctx.fillStyle = linearGradient
// 3-2. 绘制矩形
ctx.fillRect(100, 100, 400, 100)●这样突变色彩就呈现了
●接下来咱们放大矩形范畴
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 制订突变计划
// 2-1. 生成一个突变计划
const linearGradient = ctx.createLinearGradient(100, 100, 500, 200)
// 2-2. 增加突变色彩
linearGradient.addColorStop(0, 'red')
linearGradient.addColorStop(1, 'orange')
// 3. 绘制一个矩形
// 3-1. 设置填充矩形的填充色彩, 应用突变
ctx.fillStyle = linearGradient
// 3-2. 绘制矩形
ctx.fillRect(100, 100, 300, 100)●咱们会看到, 咱们只能看到残缺突变的一部分了
●留神 : 突变不是依据你的图形而制订的, 而是依据画布制订的
●文本内容也是能够应用线性突变的
径向突变
●和方才的线性突变是一样的
○先要制订突变计划
○而后向突变计划内增加色彩
●剩下的就是在应用的时候间接应用突变计划即可
●语法 : ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)
○x1 : 起始圆圆心 x 轴坐标
○y1 : 起始圆圆心 y 轴坐标
○r1 : 起始圆半径
○x2 : 终止圆圆心 x 轴坐标
○y2 : 终止圆圆心 y 轴坐标
○r2 : 终止圆半径
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 制订突变计划
// 2-1. 生成一个突变计划
const radialGradient = ctx.createRadialGradient(100, 100, 100, 500, 200, 50)
// 2-2. 向突变计划内填充色彩
radialGradient.addColorStop(0, 'red')
radialGradient.addColorStop(1, 'orange')●这个突变计划是什么样子的内, 不太好用文字描述
●其实就是两个圆的切线相连, 绘制的区域为突变区域
●看上面这个例子
●这样可能更明确一些
●留神 : 突变是蕴含开始圆地位, 然而不蕴含终止圆的地位的
●依照切线相连的区域, 超出去的局部会用纯色填充, 由 canvas 本人计算
●依照咱们方才绘制的突变计划, 咱们绘制一个和画布一样大小的矩形就能看出成果了
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')
// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
// 2. 制订突变计划
// 2-1. 生成一个突变计划
const radialGradient = ctx.createRadialGradient(100, 100, 100, 500, 200, 50)
// 2-2. 向突变计划内填充色彩
radialGradient.addColorStop(0, 'red')
radialGradient.addColorStop(1, 'orange')
// 3. 绘制矩形
// 3-1. 应用突变计划
ctx.fillStyle = radialGradient
// 3-2. 绘制矩形
ctx.fillRect(0, 0, 600, 300)●这就是径向突变
●文本内容也是能够应用径向突变的