首页 前端知识 Canvas保姆级教程----深入解析HTML5 Canvas工作原理和常用方法

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

2024-04-29 12:04:28 前端知识 前端哥 733 737 我要收藏

📢 鸿蒙专栏:想学鸿蒙的,冲

📢 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为前端开发提供了强大的能力,希望本文可以帮助大家高效开发丰富的网页组件和图形效果。

        我们改日再会

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6642.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!