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