Html 网页中的 Canvas 元素怎么调整宽高

canvas 的默认样式设置优先级过高,导致 CSS 配置失效

问题

在 canvas 元素的 style 属性中配置宽高正常。但是,在 css 中配置 canvas 的宽高无效

原因

  1. canvas 有 width 和 height 属性,用于配置 canvas 的分辨率,style 的 width 和 height 用于配置 canvas 元素的宽高(拉伸后的宽高) ;

  2. canvas 默认会给 style 的 width 和 height 默认值,优先级比 css 中的样式配置优先级高;

解决方案

在 canvas 的 style 属性中配置 width 和 height。

注意要配置好分辨率,避免显示内容被拉伸导致变形

Gear(夕照)的博客。记录开发、生活,以及一些不足为道的思考……