Skip to content

Main Navigation 👀 TOC

⚙️ Settings

📂 TNotes.yuque

Appearance

Sidebar Navigation

1. 自学 Canvas 时的一些参考资料

⏰ canvas 在线学习 - 菜鸟教程

⏰ canvas 在线学习 - 掘金

⏰ canvas 在线学习 - html5canvas tutorials

⏰ canvas 在线学习 - MDN Canvas tutorial

⏰ canvas 在线学习 - HTML Canvas Deep Dive

2. 基本概念

⏰ 认识 canvas 标签

⏰ 判断浏览器是否支持 canvas

⏰ 区分 canvas 的 width、height 属性和 style 中设置的 width、height 值

⏰ canvas 的默认尺寸 300 x 150

⏰ 使用 JSDoc 来标注 canvas 变量类型

3. 绘图操作

⏰ 使用 ctx.clearRect 清除画布

⏰ 使用 ctx.fillRect 绘制矩形

⏰ 使用 ctx.strokeRect 绘制矩形

⏰ 使用 ctx.roundRect 绘制圆角矩形

⏰ 使用 ctx.rect 绘制矩形

⏰ 使用 ctx.arc 绘制圆弧

⏰ 使用 ctx.ellipse 绘制椭圆

⏰ 使用 ctx.arcTo 绘制圆弧

⏰ 使用 ctx.drawImage 引入图像

⏰ 使用 ctx.createConicGradient 实现锥形渐变效果

⏰ 使用 ctx.createLinearGradient 实现线性渐变效果

⏰ 使用 ctx.createRadialGradient 实现径向渐变效果

⏰ 给图像添加阴影

⏰ 使用 ctx.filter 实现滤镜效果

4. 路径和形状

⏰ 使用 ctx.closePath 闭合路径

⏰ 使用 ctx.beginPath 方法对路径进行分组

⏰ 使用 ctx.quadraticCurveTo、ctx.bezierCurveTo 绘制贝塞尔曲线

5. 文本处理

⏰ 使用 ctx.fillText、ctx.strokeText 绘制文本

⏰ 使用 ctx.font 设置字体样式

⏰ 使用 ctx.textBaseline、ctx.textAlign 设置文本对齐方式

6. 动画效果

⏰ 使用 ctx.save 和 ctx.restore 保存和恢复画布状态

⏰ 使用 ctx.lineCap 设置线条端点样式

⏰ 使用 ctx.lineDashOffset 设置虚线的偏移量

⏰ 使用 ctx.setLineDash 设置虚线

⏰ 使用 ctx.miterLimit 约束两线相交处的最大倾斜长度

⏰ 使用 ctx.lineTo 来绘制线条

⏰ 使用 ctx.lineJoin 设置线条连接处的样式

⏰ 绘制网格

⏰ 矩形边框旋转动画

⏰ 线条穿梭动画

⏰ 模拟进度条动画效果

⏰ 使用 ctx.rotate 实现图像旋转

⏰ 使用 ctx.scale 缩放绘制的图像

⏰ 使用 ctx.transform 来转换图形

⏰ 使用 ctx.translate 移动画布

⏰ 模拟烟花效果

⏰ 实现动态时钟效果

⏰ 贪吃蛇小游戏

7. 图像处理

⏰ 使用 ctx.clip 实现图像裁剪

⏰ 使用 ctx.createPattern 创建填充图案

⏰ 使用 ctx.drawImage 绘制视频图像

⏰ 使用 ctx.drawImage 实现人物奔跑动画效果

⏰ 使用 ctx.getImageData、ctx.putImageData 实现图像的像素处理

⏰ 使用 ctx.globalCompositeOperation 处理图像合成

⏰ 使用 ctx.globalCompositeOperation 实现刮刮乐效果

⏰ 下载、使用 canvas 图像

to top

目录

open in vscode

Copied!

✅ 已完成：0

0054. canvas 在线学习 - MDN Canvas tutorial

1. 📝 简介
2. 🔗 links

1. 📝 简介

记录了 MDN 上 canvas 相关的链接。

2. 🔗 links

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
- MDN Canvas tutorial

👣 9437 | 2025年04月29日周二 14:28:59

Last updated:

Pager

上一篇⏰ canvas 在线学习 - html5canvas tutorials

下一篇⏰ canvas 在线学习 - HTML Canvas Deep Dive