Titanium SDK中Android平台WebView内Canvas百分比高度问题的分析与解决方案

问题背景

在Titanium SDK 12.4.0.GA版本中，Android平台上的WebView组件存在一个关于Canvas元素尺寸渲染的特殊问题。当开发者尝试使用百分比(如100%)来定义Canvas的高度时，会出现渲染异常，导致Canvas无法正确填满父容器。

问题现象

具体表现为：

1. 通过CSS设置height: 100%或直接在Canvas标签上设置height="100%"时，Canvas的实际高度会被压缩
2. 在某些情况下，Canvas会呈现为正方形，高度与宽度相同，而非预期的全屏尺寸
3. 虽然背景色能够正确填充整个WebView区域，但Canvas本身的绘制区域却不符合预期

技术分析

这个问题本质上源于Android WebView对HTML文档结构的特殊处理方式：

1. 文档流计算差异：在Android WebView中，默认情况下HTML文档的body和html元素没有显式的高度定义，导致百分比高度无法正确计算参考基准
2. CSS百分比解析：当父元素没有明确定义高度时，子元素的百分比高度会回退到默认值或内容高度
3. Canvas特性：Canvas元素同时具有CSS尺寸和内部绘图表面尺寸两个概念，两者需要协调才能正确渲染

解决方案

方案一：JavaScript动态计算尺寸（推荐）

const canvas = document.getElementById('plot2d');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 如果有绘图逻辑，需要在此处重新绘制
  drawStuff();
}

// 初始设置
resizeCanvas();
// 监听窗口变化
window.addEventListener('resize', resizeCanvas, false);

方案二：使用Chart.js时的特殊处理

对于使用Chart.js库的情况，需要额外配置：

const canvas = document.getElementById('plot2d');
const chart = new Chart(canvas.getContext('2d'), {
  options: {
    responsive: false,
    maintainAspectRatio: false
    // 其他图表配置...
  }
});

function resizeChart() {
  chart.resize(window.innerWidth, window.innerHeight);
}

// 初始设置
resizeChart();
// 监听窗口变化
window.addEventListener('resize', resizeChart, false);

方案三：CSS修正（有限效果）

虽然不能完全解决问题，但可以改善基础布局：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

最佳实践建议

1. 优先使用JavaScript方案：这是最可靠的方法，能确保在各种情况下都能正确计算尺寸
2. 考虑性能因素：在resize事件处理函数中加入防抖(debounce)逻辑，避免频繁重绘
3. 跨平台兼容性：虽然此问题主要出现在Android平台，但建议统一使用JavaScript方案以保证各平台一致性
4. 响应式设计：结合CSS媒体查询和JavaScript方案，实现更精细的布局控制

总结

Titanium SDK在Android平台上WebView内Canvas元素的百分比高度问题，反映了移动端WebView实现与标准浏览器环境的差异。通过理解底层原理并采用JavaScript动态计算尺寸的方案，开发者可以可靠地解决这个问题，确保Canvas元素在各种设备上都能正确渲染。