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