现在前端代码书写习惯,一般都会遵循标签结构与样式分离的写法,即一般不添加标签属性来控制页面元素显示效果,而通过<style/> 或引用css文件来实现!
但使用Canvas时,也采用同样的方式来处理,却会产生一个让人很难理解的现象:使用<style/> 或引用css文件设置Canvas画布的width、height大小,则导致画布元素尺寸会按css值进行比例缩放,示例如下:
提示:你可以先修改部分代码再运行。
正确设置canvas标签尺寸大小的方式是:直接通过添加标签属性width、height来实现的,这也是避免出现上述怪现象的最直接、简单的方法,上述代码改动如下:
提示:你可以先修改部分代码再运行。
另外要注意的是:
虽然w3c官方称,width、height这2个属性可以指定为一个整数像素值或者是窗口宽高度的百分比:https://www.w3school.com.cn/jsref/dom_obj_canvas.asp
但实际上:canvas标签属性width/height值只能是数值,而不能识别百分比(即使设置canvas为块状元素display:block;也一样),表现页面无效果!
参考链接:
https://www.alixixi.com/web/a/2014031192657.shtml
https://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html
https://blog.csdn.net/mydeman/article/details/11766847
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}