乐趣区

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

jiezi

●上一章咱们理解了 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()

●留神 :
○绘制路线能够是顺时针或者逆时针
○然而计算弧度的点的时候, 肯定是依照规定计算

退出移动版