canvas标签getContext方法的alpha参数是否仅为建议性？此行为是否符合预期？

测试代码 #

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

<script>
    context = document.getElementById('cvs').getContext('2d', {alpha: false});
    context.fillStyle = 'red';
    context.fillRect(0,0,100,100);
    context.fillStyle = '#ff07';
    context.fillRect(25,25,100,100);
</script>

测试现象 #

测试发现设置alpha: false后，画布背景变为黑色而非透明，说明该参数确实产生作用，但仍可使用半透明颜色。

疑问 #

canvas标签的getContext方法的alpha参数是否仅为建议性？此行为是否为预期设计？

解答 #

alpha: false不是建议性参数，这个行为完全符合规范的预期设计，具体可以从两点理解：

• 画布本身的透明属性：当设置alpha: false时，画布的底层像素缓冲区不会包含透明度通道，画布会被当作纯不透明元素处理，所以默认背景会呈现黑色（这是多数图形系统的默认不透明底色）。浏览器还可以基于这个设置做性能优化，比如跳过画布与页面背景的透明合成步骤。
• 绘图颜色的半透明支持：这和画布本身的透明属性是两回事。你使用半透明颜色绘图时，颜色的alpha值会参与绘制过程中的混合计算，但最终结果会被渲染到不透明的画布缓冲区里，不会让画布整体产生透明区域。

简单总结：alpha参数控制的是画布是否具备整体透明的能力，而非限制你使用半透明的绘图颜色。

内容的提问来源于stack exchange，提问作者Richard