canvas

• 1. canvas 学习资源
• 2. 初始 canvas
• 3. 开始使用 canvas
• 4. 线条 - line
• 5. 文本 - text
• 6. 矩形 - rect
• 7. 圆弧 - arc
• 8. 路径 - path
• 9. 阴影 - shadow
• 10. 渐变 - gradient
• 11. 滤镜 - filter
• 12. 画布状态的存取 - save&restore
• 13. 图像 - image
• 14. 坐标系 - coordinate system
• 15. 动画效果 - Animation
• 16. 小游戏

1. canvas 学习资源

• 0053. canvas 学习资源
• 0056. canvas 在线学习 - 菜鸟教程
• 0052. canvas 在线学习 - 掘金
• 0054. canvas 在线学习 - MDN Canvas tutorial
• 0055. canvas 在线学习 - HTML Canvas Deep Dive

2. 初始 canvas

• 0001. 初始 canvas

3. 开始使用 canvas

• 0057. 汇总开始学习 canvas 之前需要掌握的一些基础知识
• 0002. 判断浏览器是否支持 canvas
• 0003. 区分 canvas 的 width、height 属性和 style 中设置的 width、height 值
• 0005. canvas 的默认尺寸 300x150
• 0006. 使用 JSDoc 来标注 canvas 变量类型
• 0017. 绘制网格

4. 线条 - line

• 0008. ctx.lineCap
• 0009. ctx.lineDashOffset
• 0010. ctx.setLineDash
• 0011. ctx.miterLimit
• 0012. ctx.lineTo
• 0013. ctx.lineJoin

5. 文本 - text

• 0014. ctx.fillText、ctx.strokeText
• 0015. ctx.font
• 0016. ctx.textBaseline、ctx.textAlign

6. 矩形 - rect

• 0018. ctx.fillRect
• 0019. ctx.strokeRect
• 0020. ctx.roundRect
• 0021. ctx.rect
• 0004. ctx.clearRect

7. 圆弧 - arc

• 0024. ctx.arc
• 0026. ctx.ellipse
• 0027. ctx.arcTo

8. 路径 - path

• 0022. ctx.closePath
• 0023. ctx.beginPath
• 0025. ctx.quadraticCurveTo、ctx.bezierCurveTo

9. 阴影 - shadow

• 0043. ctx.shadow 系列

10. 渐变 - gradient

• 0040. ctx.createConicGradient
• 0041. ctx.createLinearGradient
• 0042. ctx.createRadialGradient

11. 滤镜 - filter

• 0044. ctx.filter

12. 画布状态的存取 - save&restore

• 0007. ctx.save、ctx.restore

13. 图像 - image

• 0035. 使用 ctx.drawImage 引入图像
• 0031. ctx.clip
• 0032. ctx.createPattern
• 0033. ctx.drawImage
• 0036. ctx.getImageData、ctx.putImageData
• 0037. ctx.globalCompositeOperation
• 0038. 使用 ctx.globalCompositeOperation 实现刮刮乐效果
• 0039. 引用和下载 canvas 图像

14. 坐标系 - coordinate system

• 0045. ctx.rotate
• 0048. ctx.translate
• 0046. ctx.scale
• 0047. ctx.transform

15. 动画效果 - Animation

• 0028. 矩形边框旋转动画
• 0029. 线条穿梭动画
• 0030. 模拟进度条动画效果
• 0050. 实现动态时钟效果
• 0049. 模拟烟花效果
• 0034. 模拟太阳系效果

16. 小游戏

• 0051. 贪吃蛇小游戏