php width,canvas定义width、height的正确用法

现在前端代码书写习惯，一般都会遵循标签结构与样式分离的写法，即一般不添加标签属性来控制页面元素显示效果，而通过或引用css文件来实现！

但使用Canvas时，也采用同样的方式来处理，却会产生一个让人很难理解的现象：使用或引用css文件设置Canvas画布的width、height大小，则导致画布元素尺寸会按css值进行比例缩放，示例如下：

var canvas=document.createElement("canvas");

canvas.style.cssText="width:200px;height:200px;background:#080;";

var ctx=canvas.getContext("2d");

ctx.fillStyle="#f00";

ctx.fillRect(0,0,100,100);

document.body.appendChild(canvas);

提示：你可以先修改部分代码再运行。

正确设置canvas标签尺寸大小的方式是：直接通过添加标签属性width、height来实现的，这也是避免出现上述怪现象的最直接、简单的方法，上述代码改动如下：

var canvas=document.createElement("canvas");

canvas.style.cssText="background:#080;";

canvas.width=200;

canvas.height=200;

var ctx=canvas.getContext("2d");

ctx.fillStyle="#f00";

ctx.fillRect(0,0,100,100);

document.body.appendChild(canvas);

提示：你可以先修改部分代码再运行。

另外要注意的是：

虽然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

php width,canvas定义width、height的正确用法相关推荐

canvas.width和canvas.style.width区别以及应用
今天讲的内容是canvas.width和canvas.style.width的区别,在没有做canvas项目之前,其实我是并没有深入了解过这两个属性的,最近在研究canvas项目的自适应问题,尤其是在 ...
H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
html5 canvas 自动改变宽高,H5 canvas中width、height和style的宽高区别详解
前言最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧 C ...
html代码width什么意思,width：100% 啥意思呢，在什么情况下使用？
width:100% 啥意思呢,在什么情况下使用?很少用到这个,不怎么了解..有例子可以参考下么? 作者: kangyuan 发布时间: 2009-10-16 至少做规则覆盖的时候会用到吧作者: i ...
前端面试题：width:100%和width:auto的区别
width属性100%和auto的区别 1.width:100% 表示子元素的宽度和父元素的宽度相等,不包括子元素设置的内外边距和边框的值,即子元素的宽度等于父元素content的宽度代码如下: & ...
今日前端小知识—— width:auto 与 width:100% 的区别
前段时间做页面的时候,发现给盒子设置 width:100% 和 auto 的效果不一样,这里来探讨一下. <style>.main {width: 300px;height: auto;p ...
css中width:100%与width:auto的区别
在布局中,width:100%和width:auto都会经常用到,那么,二者究竟有何区别呢?下面就来探讨下. 先上代码 <style>* {margin: 0;padding: 0;}.p ...
CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别一. 问题前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
cin.width()和cout.width()问题
前言最近在跟着FishC大佬学C++,碰到了一个很有趣的输入输出问题,多方查资料,有了点心得,记录一下. cin与cout的功能虽然不同,但它们有许多类似点,如都可以指定域宽.cin的输入域宽可以使 ...

php width,canvas定义width、height的正确用法

php width,canvas定义width、height的正确用法相关推荐

最新文章

热门文章