好程序员:前端JavaScript全解析——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()

复制代码

●注意 :

○绘制路线可以是顺时针或者逆时针

○但是计算弧度的点的时候, 一定是按照规则计算

关注小源，为您解答更多前端和Java技术相关文章！