●上一章咱们理解了 canvas 的应用和绘制一些简略的线段以及填充
●这一章, 咱们来通过 canvas 提供的办法开绘制一些简略的形态
绘制矩形
绘制根底矩形
●语法 : 工具箱.rect( 矩形终点 x 轴坐标, 矩形终点 y 轴坐标, 矩形宽度, 矩形高度 )
// 0. 获取到页面上的 canvas 标签元素节点const canvasEle = document.querySelector('#canvas')// 1. 获取以后这个画布的工具箱const ctx = canvasEle.getContext('2d')// 2. 绘制根底矩形ctx.rect(100, 100, 100, 100)●这个示意从画布坐标 100, 100 的地位开始绘制一个 100 * 100 的矩形
●留神 : 这里绘制的矩形只是一个矩形痕迹, 关上浏览器你会发现什么都没有呈现
●这是因为咱们没有进行描边或者填充
// 0. 获取到页面上的 canvas 标签元素节点const canvasEle = document.querySelector('#canvas')// 1. 获取以后这个画布的工具箱const ctx = canvasEle.getContext('2d')// 2. 绘制根底矩形ctx.rect(100, 100, 100, 100)// 3. 填充ctx.fill()●这样一个矩形就呈现了
绘制描边矩形
●canvas 的工具箱外面还提供了专门的描边矩形
●不须要咱们本人独自去描边了, 绘制进去就是描边过后的成果
●语法 : 工具箱.strokeRect( 矩形终点 x 轴坐标, 矩形终点 y 轴坐标, 矩形宽度, 矩形高度 )
// 0. 获取到页面上的 canvas 标签元素节点const canvasEle = document.querySelector('#canvas')// 1. 获取以后这个画布的工具箱const ctx = canvasEle.getContext('2d')// 2. 绘制根底矩形ctx.strokeRect(100, 100, 100, 100)●咱们同样能够用 lineWidth 和 strokeStyle 来设置线宽和描边色彩
绘制填充矩形
●和描边矩形一个情理, 只不过这次是填充而已
●语法 : 工具箱.fillRect( 矩形终点 x 轴坐标, 矩形终点 y 轴坐标, 矩形宽度, 矩形高度 )
// 0. 获取到页面上的 canvas 标签元素节点const canvasEle = document.querySelector('#canvas')// 1. 获取以后这个画布的工具箱const ctx = canvasEle.getContext('2d')// 2. 绘制根底矩形ctx.strokeRect(100, 100, 100, 100)●填充矩形也一样能够应用 fillStyle 来设置填充色彩
绘制擦除矩形
●这个其实就是咱们画画时候的橡皮擦, 擦除掉一个局部的内容
●语法 : 工具箱.clearRect( 矩形终点 x 轴坐标, 矩形终点 y 轴坐标, 矩形宽度, 矩形高度 )
// 0. 获取到页面上的 canvas 标签元素节点const canvasEle = document.querySelector('#canvas')// 1. 获取以后这个画布的工具箱const ctx = canvasEle.getContext('2d')// 2. 绘制根底矩形ctx.fillRect(100, 100, 100, 100)// 3. 绘制擦除矩形ctx.clearRect(150, 150, 30, 30)●从坐标 150, 150 地位开始, 擦除一块 30 * 30 的区域, 不论有什么都间接抹掉
绘制圆形
●canvas 内有绘制原型的办法
●在这之前呢, 咱们先要理解一下什么是圆形
●其实就是从一个点登程, 确定半径当前, 开始画弧线, 当弧线饶了一圈回到原点的时候
●就是一个圆形
●所以, 与其说是绘制圆形, 不如说是绘制弧线
弧度
●在 canvas 内, 咱们绘制的时候, 应用的都是弧度
●所以, 咱们先要来晓得什么是弧度
●这是一个圆, 圆心为 o, 半径为 r
●x 轴正方向上和圆周的焦点为弧度终点
●咱们在圆周上, 从弧度终点, 顺着圆周挪动, 当弧长和半径一样的时候
●此时这一段弧长所对应的圆心角是 1 弧度
●依据咱们的圆周公式 : 周长 = 2 半径
●所以咱们一个正圆的弧度就应该是 2 * 的弧度
绘制弧线
●理解了什么是弧度, 接下来就能够开始绘制弧线了
●语法 : 工具箱.arc( x, y, r, startAngle, endAngle, counterclockwise )
○x : 圆心的 x 轴坐标
○y : 圆心的 y 周坐标
○r : 圆的半径
○startAngle : 绘制弧线的终点弧度
○endAngle : 绘制弧线的起点弧度
○counterclockwise : 方向, false 为顺时针(默认), true 为逆时针
●画一个简略的四分之一圆试试看
●依据方才的公式
○一个圆周是 : 2 * 弧度
○半个圆周是 : 弧度
○四分之一圆周是 : / 2 弧度
// 0. 获取到页面上的 canvas 标签元素节点const canvasEle = document.querySelector('#canvas')// 1. 获取以后这个画布的工具箱const ctx = canvasEle.getContext('2d')ctx.strokeStyle = '#000'ctx.lineWidth = 2// 2. 绘制弧线门路ctx.arc(150, 150, 100, 0, Math.PI / 2, false)// 3. 描边ctx.stroke()●再来测试一下逆时针计算弧度
// 0. 获取到页面上的 canvas 标签元素节点const canvasEle = document.querySelector('#canvas')// 1. 获取以后这个画布的工具箱const ctx = canvasEle.getContext('2d')ctx.strokeStyle = '#000'ctx.lineWidth = 2// 2. 绘制弧线ctx.arc(150, 150, 100, 0, Math.PI / 2, true)ctx.stroke()●留神 :
○绘制路线能够是顺时针或者逆时针
○然而计算弧度的点的时候, 肯定是依照规定计算