绘制椭圆
●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 = 10ctx.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 = 10ctx.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 = 5ctx.shadowOffsetX = 50ctx.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)