Canvas

原创 2015年07月10日 12:08:42
  • 每个其他UI元素都必须处于一个Canvas的子级中。
  • 一个场景中可以存在多个Canvas。

Render Mode– Screen Overlay

  • 画布总会铺满整个屏幕,总是渲染在所有元素的最上层,画布的RectTransform的大小由屏幕决定。
  • Pixel Perfect选项会让UI边缘锐利。

Render Mode—Camera

  • 在没有指认摄像机时候,和Sreen Overlay效果完全一样。指认了摄像机以后,画布会自动调整到摄像机的可视范围内,画布全权交由这个摄像机来渲染,多个相机的渲染次序、相机类型等都会对该画布的元素有影响。此模式下画布的RectTransform完全受到相机的ViewPort Rect影响。
  • Pixel Perfect和Screen Overlay模式下作用一样
  • Plane Distance决定Canvas与渲染相机的距离

该模式可能有如下应用场景:

  1. 如果渲染Canvas的相机是透视的,可以调整Canvas内某些元素的旋转角度,产生透视和深度效果。
  2. 可以通过不同相机的sorting layer和渲染的图层来实现UI上方的粒子特效等。

Render Mode – World Space

  • 画布的Rect Transform完全自由,不受任何约束。可以自行设置大小、位置。
  • 可以放置于物体的子级,常用作气泡、对话框等
  • Event Camera 该选项决定该UI接受哪个相机的事件,如果该项为None,则默认接受主相机的事件。如果指定某个相机,则只接受该相机的事件
版权声明:请尊重原创内容,转载请注明来源及链接。

相关文章推荐

canvas画图Demo

  • 2017年12月05日 10:47
  • 804KB
  • 下载

PP.Learning.Android.Canvas

  • 2017年11月19日 23:55
  • 2.4MB
  • 下载

canvas绘制矩形、三角形、圆形

1、绘制矩形 canvas绘制矩形 canvas{ border: 1px so...

canvas 涂鸦 保存 预览 下载

  • 2017年11月17日 16:26
  • 1.89MB
  • 下载

html2canvas 实现纯JS网页截图简单例子

代码库地址: https://github.com/niklasvh/html2canvas 自己修改其中的 test.js (主要是其中的一些库的路径) 把test.js external文件...
  • sqzhao
  • sqzhao
  • 2015年10月01日 00:18
  • 11575

canvas.js html5.js 兼容ie

  • 2017年11月14日 11:15
  • 71KB
  • 下载

Hencoder 练习 canvas绘制饼图

  • 2017年11月12日 22:19
  • 10KB
  • 下载

HTML5教程实例-Canvas标签-坐标变换与路径结合使用

HTML5教程实例-Canvas标签-坐标变换与路径结合使用 到目前为止,我们已经学会了很多Canvas的绘制方法,如果我们要绘制如下图的图形怎么办呢? 我们需要对矩形变形,使用坐标变换就足...

HTML5_Canvas开发详解(第2版)

  • 2017年10月31日 04:59
  • 81.05MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Canvas
举报原因:
原因补充:

(最多只允许输入30个字)