Canvas保姆级教程----深入解析HTML5 Canvas工作原理和常用方法

📢 鸿蒙专栏：想学鸿蒙的，冲

📢 C语言专栏：想学C语言的，冲

📢 VUE专栏：想学VUE的，冲这里

📢 CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

目录

✨ 前言

一、Canvas工作原理

1、获取Canvas元素

2、获取渲染上下文

3、绘图方法

4、渲染动画

二、坐标系统

三、常用绘图方法

1、绘制矩形

2、绘制路径

3、绘制圆弧 arc()

4、绘制图像 drawImage()

5、变形

6、样式设置

7、渐变和图片填充

 四、Canvas案例:

1、复杂路径绘制

2、保存和恢复状态

3、剪切区域 clip()

4、图像像素操作

5、动画效果

✨ 结语

---

 

✨ 前言

        HTML5 Canvas让网页具备了强大的绘图能力,我们可以通过JavaScript动态生成各种图表、动画等复杂的可视化效果。要合理利用Canvas开发丰富的组件和页面,理解它的工作原理是必要的。本文将详细解析Canvas的实现过程,并给出各种常用绘图方法的代码示例,希望可以帮助开发者全面掌握Canvas。

一、Canvas工作原理

1、获取Canvas元素

使用document.getElementById()获取HTML页面中的<canvas>元素,例如:

const canvas = document.getElementById('myCanvas')

2、获取渲染上下文

通过canvas.getContext()获取绘图上下文,通常我们使用2d上下文:

const ctx = canvas.getContext('2d')

3、绘图方法

通过上下文提供的API绘制图形,诸如rect、arc等。

ctx.rect(20, 20, 150, 100)

4、渲染动画

Canvas会记录绘图命令,并在需要时重绘整个scen来实现动画效果。

二、坐标系统

Canvas使用一个笛卡尔坐标系统,原点在左上角,x轴向右为正,y轴向下为正,单位默认为px。

三、常用绘图方法

1、绘制矩形

• fillRect(x, y, width, height) 填充矩形
• strokeRect(x, y, width, height) 绘制矩形边框

  // 绘制一个蓝色矩形
  ctx.fillStyle = 'blue' 
  ctx.fillRect(20, 20, 150, 100)
  
  // 绘制一个矩形边框 
  ctx.strokeStyle = 'red'
  ctx.strokeRect(20, 20, 150, 100)

2、绘制路径

• 使用beginPath()起始一条路径,各种绘图命令添加子路径,closePath()闭合路径。

  ctx.beginPath()
  ctx.moveTo(20, 20)
  ctx.lineTo(200, 20)
  ctx.lineTo(200, 100)
  ctx.closePath()
  ctx.stroke()

3、绘制圆弧 arc()

arc(x, y, radius, startAngle, endAngle, anticlockwise)

ctx.beginPath()
ctx.arc(100, 75, 50, 0, 2 * Math.PI) 
ctx.fillStyle = 'red'
ctx.fill()

4、绘制图像 drawImage()

// 绘制图像
const img = new Image() 
img.src = 'image.png'
img.onload = function() {
  ctx.drawImage(img, 0, 0) 
}

// 缩放绘制
ctx.drawImage(img, 0, 0, width, height) 

// 剪切绘制
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

5、变形

• translate(x, y) 坐标系平移
• rotate(angle) 旋转坐标系
• scale(x, y) 坐标系缩放
• transform(a, b, c, d, e, f) 变形矩阵

// 平移坐标系原点到(50, 50)
ctx.translate(50, 50)

// 以(50, 50)为中心旋转30度
ctx.rotate(30 * Math.PI/180) 

// 缩放坐标系
ctx.scale(0.5, 0.5)

6、样式设置

• fillStyle 填充样式
• strokeStyle 线条样式
• lineWidth 线宽
• lineCap 线端样式

ctx.fillStyle = 'rgba(255, 0, 0, 0.3)' 

ctx.lineWidth = 5
ctx.strokeStyle = '#333'

7、渐变和图片填充

• createLinearGradient() 线性渐变
• createRadialGradient() 径向渐变
• createPattern() 填充画布图案

// 创建一个线性渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red') 
grd.addColorStop(1, 'white')

// 填充渐变
ctx.fillStyle = grd 
ctx.fillRect(10, 10, 150, 80)

 四、Canvas案例:

1、复杂路径绘制

我们可以通过多次调用lineTo()和曲线绘制方法来创建复杂路径:

ctx.beginPath()

ctx.moveTo(50, 50)
ctx.lineTo(100, 75) 
ctx.quadraticCurveTo(100, 25, 150, 50)
ctx.lineTo(150, 150)

ctx.closePath()
ctx.fill()

2、保存和恢复状态

save() 和 restore() 可以保存和恢复Canvas的状态: 

// 保存当前状态
ctx.save()  

// 移动坐标系原点
ctx.translate(100, 100)

// 绘制路径
ctx.beginPath()
//...

// 恢复到保存的状态
ctx.restore()

3、剪切区域 clip()

我们可以剪切出某个形状的区域:

// 剪切矩形区域
ctx.rect(50, 50, 100, 100)
ctx.clip()

// 后续的绘制都会被剪切
ctx.beginPath()  
// ...

4、图像像素操作

getImageData() 和 putImageData() 可以直接读写像素信息。

5、动画效果

通过循环调用绘制方法,并清除上一帧可以创建动画。

function draw(){

  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  //绘制当前帧动画
  
  requestAnimationFrame(draw)
}

✨ 结语

        通过详细解析Canvas的原理及各种绘图方法的代码示例,相信大家对Canvas的运作和使用会有更深入的理解。Canvas为前端开发提供了强大的能力,希望本文可以帮助大家高效开发丰富的网页组件和图形效果。

        我们改日再会