HTML5 Canvas实战
4 精通画布变换
阅读(

路径和文本

图形及组合

处理图像和视频

精通画布变换

本章将向你展示画布变换的魅力,变换可以大大简化复杂图形的绘制,并为我们提供目前还没有的新功能。迄今为止,我们一直在使用x,y坐标,来直接定位屏幕上的元素。如果你已经计算出复杂图形每个点的坐标,而后面又决定对整个绘画进行重新定位、旋转、或缩放,这很快就会成为问题。画布变换允许开发者不必重新计算绘图中每个点的坐标,就能平移、旋转、缩放整个画布,使该问题迎刃而解。另外,画布变换还使开发者能够旋转、缩放图像和文本,没有变换,这是不可能的事情。

本章内容:

  • 平移画布上下文
  • 旋转画布上下文
  • 缩放画布上下文
  • 创建镜像变换
  • 创建自定义变换
  • 切割画布上下文
  • 使用栈处理多个变换
  • 把圆变换为椭圆
  • 旋转图像
  • 绘制一个简单的logo并随机定位、旋转、缩放
← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验