关于前端:JavaScript全解析canvas-绘制形状下

绘制椭圆

●canvas 也提供了绘制椭圆的 API
●语法 : 工具箱.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise)
○x : 椭圆中心点的 x 轴坐标
○y : 椭圆中心点的 y 轴坐标
○radiusX : 椭圆在 x 轴方向上的半径
○radiusY : 椭圆在 y 轴方向上的半径
○rotation : 旋转弧度
○startAngle : 弧线开始弧度
○endAngle : 弧线完结弧度
○antiClockwise : 方向, false 示意逆时针绘制(默认), true 示意顺时针绘制
●留神 :
○计算弧度的形式和之前咱们画圆的时候是一样的
○旋转弧度是指讲该椭圆进行旋转
●语法有了, 咱们当初开始试一下

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

// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
ctx.strokeStyle = '#000'
ctx.lineWidth = 2

// 2. 绘制椭圆
ctx.ellipse(300, 150, 200, 100, 0, 0, Math.PI * 2, false)

// 3. 描边
ctx.stroke()

●这样咱们一个椭圆就进去了, 咱们来具体解释一下这些内容的意义

●旋转弧度, 就是在当初的根底上, 让整个图形进行旋转

绘制暗影

●canvas 中也是能够绘制暗影的
●不论是描边还是填充, 都能够绘制暗影
●然而要在 描边 或者 填充 之前, 进行暗影设置就好

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

// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
ctx.strokeStyle = '#000'
ctx.lineWidth = 2

// 2. 绘制椭圆
ctx.ellipse(300, 150, 200, 100, 0, 0, Math.PI * 2, false)

// 3. 设置暗影
// 3-1. 设置暗影色彩
ctx.shadowColor = 'red'
// 3-2. 设置暗影含糊成都
ctx.shadowBlur = 20
// 3-3. 设置暗影 x 轴方向偏移量
ctx.shadowOffsetX = 50
// 3-4. 设置暗影 y 轴方向偏移量
ctx.shadowOffsetY = 50

// 4. 描边
ctx.stroke()

●暗影就进去了, 填充的图形, 暗影也是一个情理

绘制虚线

●canvas 中绘制虚线比较简单, 只有配置好虚线计划即可
●然而在配置虚线计划的时候, 咱们须要多一些思考
●语法 : 工具箱.setDashLine([第一段长度, 第二段长度, …])
这个解释起来略微简单一些
咱们都晓得虚线就是一段有一段没有
依照有和没有辨别, 咱们能够把一个虚线分成一段一段的
●先来看一个例子

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

// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
console.log(ctx)


// 2. 设置虚线计划
// 其实就是 5px 和 10px 反复呈现
ctx.setLineDash([5, 10])

// 3. 绘制线段
ctx.moveTo(100, 100)
ctx.lineTo(400, 100)

ctx.strokeStyle = '#000'
ctx.lineWidth = 10

ctx.stroke()

●当初看起来很简略, 然而咱们讲计划稍作批改

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

// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
console.log(ctx)


// 2. 设置虚线计划
// 其实就是 5px 和 10px 和 15px 反复呈现
ctx.setLineDash([5, 10, 15])

// 3. 绘制线段
ctx.moveTo(100, 100)
ctx.lineTo(400, 100)

ctx.strokeStyle = '#000'
ctx.lineWidth = 10

ctx.stroke()

●咱们会看到呈现了一个奇奇怪怪的图形, 这是为什么呢
其实咱们先来看虚线计划
ctx.setLineDash([5, 10, 15])
也就是说, 在形容这个虚线的时候, 是 5px, 10px, 15px, 5px, 10px, 15px, … 这样反复
在一个虚线的绘制过程中, 第一段是 有内容, 第二段是 空白, 第三段是 有内容, … 反复
所以,
第一段有内容的就是 5px
第二段空白的就是 10px
第三段又是有内容, 那么就是 15px
第四段是空白内容, 回到 5px 反复
第五段是有内容, 就到了 10px
第六段是空白内容, 就是 15px
至此, 才是一个残缺的 虚线计划 和 虚线绘制 配套的第一个反复片段
●倡议 : 如果不是非凡须要, 一般来说, 虚线绘制计划咱们进行采取两个数字反复

绘制文本

●canvas 内能够间接绘制文本的, 不须要咱们用线条去绘制
●而且咱们绘制字体的时候能够有两种
○描边字体

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

// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
console.log(ctx)

// 2. 开始绘制文本
// 2-1. 筹备一段要绘制的文本内容
const text = '千锋 - 数字智慧大前端'
// 2-2. 设置字体内容
// 语法: 工具箱.font = '字号大小 字体'
ctx.font = '30px Arial'
// 2-3. 设置描边色彩
ctx.strokeStyle = '#000'
// 2-4. 绘制描边字体
// 语法: 工具箱.strokeText(文本, 文本开始 X 坐标, 文本开始 Y 坐标)
ctx.strokeText(text, 100, 100)

// 2-5. 设置填充色彩
ctx.fillStyle = 'skyblue'
// 2-6. 绘制填充字体
// 语法: 工具箱.fillText(文本, 文本开始 X 坐标, 文本开始 Y 坐标)
ctx.fillText(text, 100, 220)

●这样咱们的文字就绘制进去了
●接下来就是绘制一些文字相干的细节

绘制文字暗影

●和方才咱们的绘制暗影是一样的
●只有在绘制之前把暗影属性设置好即可

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

// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
console.log(ctx)

// 设置暗影信息
ctx.shadowColor = 'red'
ctx.shadowBlur = 5
ctx.shadowOffsetX = 50
ctx.shadowOffsetY = 50

// 2. 开始绘制文本
// 2-1. 筹备一段要绘制的文本内容
const text = '千锋 - 数字智慧大前端'
// 2-2. 设置字体内容
ctx.font = '30px Arial'
// 2-3. 设置描边色彩
ctx.strokeStyle = '#000'
// 2-4. 绘制描边字体
ctx.strokeText(text, 100, 100)

// 2-5. 设置填充色彩
ctx.fillStyle = 'skyblue'
// 2-6. 绘制填充字体
ctx.fillText(text, 100, 220)

设置文字对其形式

●在 canvas 内, 对于文字的对其形式润饰就是两种
○程度方向
○垂直方向
●程度方向对其
○语法 : 工具箱.textAlign = ‘ 值 ’
○值
start：默认, 文本在指定的地位开始
end：文本在指定的地位完结
center：文本的核心被搁置在指定的地位
left：文本左对齐
right：文本右对齐
○留神 : 这里指定的值是指你在应用 fillText 或者 strokeText 时设置的 x 轴坐标地位

●垂直对其形式
○语法 : 工具箱.testBaseline = ‘ 值 ’
○值
alphabetic：默认，文本基线是一般的字母基线
top：文本基线是 em 方框的顶端
hanging：文本基线是悬挂基线
middle：文本基线是 em 方框的正中
ideographic：文本基线是 em 基线
bottom：文本基线是 em 方框的底端
○其实和咱们学习 css 的时候的对其形式是一样的

获取文本信息

●有的时候, 咱们可能须要给文本加一个下划线
●或者在某些时候, 咱们须要把文本包裹在一个矩形框内
●那么这个时候, 咱们就要拿到你写的这一段文本, 在画布上占多宽
●这个时候, 咱们就能够获取文本信息了
●当你曾经设置好文本信息当前, 不须要绘制的时候, 就能够拿到未来文本会在画布上占据多少信息
●语法 : 工具箱.measureText(文本内容)

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

// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
console.log(ctx)

// 2. 开始绘制文本
// 2-1. 筹备一段要绘制的文本内容
const text = '千锋 - 数字智慧大前端'
// 2-2. 设置字体内容
ctx.font = '30px Arial'
// 2-3. 设置描边色彩
ctx.strokeStyle = '#000'

// 获取字体信息
const textInfo = ctx.measureText(text)
console.log(textInfo) // 残缺字体信息
console.log(textInfo.width) // 字体在画布上所占据的宽度

虚线文本

●其实就是在绘制一个描边文本的时候
●在绘制之前, 把虚线计划给到 canvas 即可

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

// 1. 获取以后这个画布的工具箱
const ctx = canvasEle.getContext('2d')
console.log(ctx)

// 2. 开始绘制文本
// 2-1. 筹备一段要绘制的文本内容
const text = '千锋 - 数字智慧大前端'
// 2-2. 设置字体内容
ctx.font = '30px Arial'
// 2-3. 设置描边色彩
ctx.strokeStyle = '#000'
// 2-4. 增加虚线计划
ctx.setLineDash([5])

// 3. 描边绘制文本
ctx.strokeText(text, 100, 100)