learn canvas 目录

    001 基本图形 - 直线 矩形

  1. 001/01.html 矩形
  2. 001/02.html 线条末尾的帽子 3种
  3. 001/03.html 五角星
  4. 001/03_2.html 五角星 函数化
  5. 001/03_3_many_stars.html 五角星 函数化 100个
  6. 001/03_4_tangram.html 七巧板
  7. 001/04_lineJoin.html 线条连接处
  8. 001/05_rect.html 矩形
  9. 001/06_dash.html 虚线
  10. 001/07_arc.html 圆弧
  11. 001/07_arc_2.html 圆角矩形
  12. 001/07_arc_3.html 圆角矩形 进一步优化 并绘制2048游戏棋盘
  13. 001/08_arcTo.html 圆弧 切线画圆弧
  14. 001/08_arcTo_2.html 圆弧 切线画圆弧_2
  15. 001/08_arcTo_3_moon.html 圆弧 切线画圆弧 弯月
  16. 001/09_quadraticCurveTo.html 二次贝塞尔曲线
  17. 001/10_bezierCurveTo.html 三次贝塞尔曲线
  18. 001/10_bezierCurveTo_2_flower.html 三次贝塞尔曲线 花朵
  19. 001/11_ellipse.html 椭圆

    20. 002 图形变换

  20. 002/10_translate.html 移动坐标轴
  21. 002/10_translate_2.html 状态的保持和恢复
  22. 002/11_rotate.html 旋转
  23. 002/11_rotate_2.html 旋转
  24. 002/12_scale.html 缩放
  25. 002/13_star_3.html 星空
  26. 002/14_transform.html 按照矩形变换

    27. 003 颜色填充: 颜色/渐变色/pattern(图像、视频、canvas对象)

  27. 003/21_fillStyle_createLinearGradient.html 渐变色 线性渐变
  28. 003/22_fillStyle_createRadialGradient.html 渐变色 径向渐变
  29. 003/23_fillStyle_createPattern_image.html 图像填充 [必须服务器状态运行]
  30. 003/24_fillStyle_createPattern_canvas.html canvas填充 [必须服务器状态运行]

    31. 004 文字渲染

  31. 004/30_font.html 文字渲染基础
  32. 004/30_font_2_textAlign.html 文字渲染基础 文本对齐 水平方向
  33. 004/30_font_3_textBaseline.html 文字渲染基础 文本对齐 竖直方向
  34. 004/31_measureText.html 文字的度量 获取文字宽度

    35. 005 高级特性

  35. 005/40_shadow.html 阴影
  36. 005/41_globalAlpha.html 全局不透明度 很多小气泡
  37. 005/42_globalCompositeOperation.html 遮挡
  38. 005/43_clip.html 剪辑区域
  39. 005/44_pathDirection.html 路径方向和剪纸效果
  40. 005/44_pathDirection_2.html 路径方向和剪纸效果 _2 剪纸效果
  41. 005/45_isPointInPath.html 交互 单击改变小球颜色
  42. 005/45_isPointInPath_2.html 交互 悬停改变小球颜色 _2
  43. 005/46_with_Other_HTML_Tag.html 交互 与其他html标签协作
  44. 005/47_myMethod.html 扩展canvas的context
  45. 005/47_myMethod_2.html 扩展canvas的context _2 依赖其他定位
  46. 005/48_requestAnimationFrame.html 更流畅的动画效果: 自由落体并弹起的小球

    47. 006 动画制作

  47. 006/50_bumpingBall.html 碰撞的小球 使用speed和direction表示速度，对数学要求高
  48. 006/50_bumpingBall_2_gravity.html 碰撞的小球 _2 重力场 使用vx和vy表示速度(更优)
  49. 006/50_bumpingBall_2_gravity_3_requestAnimationFrame.html 碰撞的小球 _2 重力场 _ requestAnimationFrame
  50. 006/60_ball_1_class.html 小球类
  51. 006/60_ball_2_move.html 小球类 运动 撞墙
  52. 006/60_ball_3_bumpEachOther.html 小球类 运动 互相碰撞
  53. 006/61_waveProcessingBall.html 波浪进度球
  54. 006/62_wave.html 波浪(欣赏)

    55. 007 图像处理

  55. 007/70_load_image.html 载入图像，图像缩放 drawImage(image, dx,dy, ?dw,?dh)
  56. 007/71_zoom_image.html 图像缩放查看器 实例
  57. 007/72_waterMark.html 添加水印
  58. 007/73_zoom_on_mouseover.html 放大镜(鼠标单击和拖动时 局部放大图片)
  59. 007/74_get_put_imageData.html 像素级的图像处理: 获取和放置图像数据
  60. 007/75_imageData_filer.html 图像滤镜
  61. 007/75_imageData_filer_2.html 图像滤镜 更多滤镜(7个滤镜效果: 单个通道、灰度、黑白、反色、模糊、马赛克)
  62. 007/76_createImageData.html ctx.createImageData(w,h) 创建图像 一段感受到人类璀璨智慧的图像构建代码

    SVG目录

  1. indexSVG.html SVG的目录