canvas标签设置宽高的正确方法

一、问题描述

最近写前端，使用<canvas>标签时，发现画出来的图片宽高设置没有生效。
1.这样设置，不行：

<canvas height="270" wight="270"></canvas>

听说这样单位是px的，但是我的问题是这样设置直接就没有生效。

2.这样设置，也不行：

<canvas id="mycanvas"></canvas>


import QRCode from 'qrcode';



        var canvas=document.getElementById("canvas");  
        // 这个是生成扫码用的二维码的方法，也是用到了canvas，听说这里也能设置宽高
        QRCode.toCanvas(canvas,"http://www.baidu.com",{
        scale: 6,
        height: 270,
        wight: 270
        },function(error){        
        if(error){
            console.error("canvas-error",error);        
            }
        else {         
            console.log("canvas-success!");        
            }    
        });   

听说这样单位也是px的，但是我的问题是这样设置直接就没有生效。

3.这样设置，还是不行：

<canvas class="QR"></canvas>


            .QR{
              width: 270px;
              height: 270px;
            }

听说这样单位可以灵活配置，但是我的问题是这样设置直接就没有生效。

二、正确解决方法

试了下，这样设置，就可以了：

<canvas class="QR"></canvas>


            .QR{
              width: 270px !important;
              height: 270px !important;
            }

用!important设置样式优先级最高，即可生效。