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

女爷i 2024-03-16 13:49 83阅读 0赞

## 一、问题描述 ##

最近写前端，使用`<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`设置样式优先级最高，即可生效。**

发表评论取消回复

表情：

评论列表（有 0 条评论，83人围观）

还没有评论，来说两句吧...

相关阅读

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

一、问题描述最近写前端，使用`<canvas>`标签时，发现画出来的图片宽高设置没有生效。 1.这样设置，不行： <canvas height="270"

女爷i/ 2024年03月16日 13:49/ 0 赞/ 84 阅读

相关 jqGrid 设置两种宽高（固定宽高，自适应宽高）

1 HTML 代码 <table id='datagrid'></table> 2 固定宽高 2.1 初始化设置固定宽高 //jqGrid初

冷不防/ 2023年10月05日 14:24/ 0 赞/ 44 阅读

相关 uni-app canvas 高度自适应宽 canvas宽高自适应---工作问题

getPersentageH(p){ p = p /100 let h = uni.getSystemInfoSync().scree

小灰灰/ 2022年12月21日 14:51/ 0 赞/ 237 阅读

相关＜canvas＞直接设置宽高和通过样式设置宽高的问题

canvas 设置宽高的方法有两种： <canvas width="600" height="400"></canvas> <canvas style="widt

￡神魔★判官ぃ/ 2022年12月19日 11:55/ 0 赞/ 202 阅读

相关 js设置canvas的宽高（动态设置canvas的宽高）

设置canvas的宽高有两种方式： 1：在html的canvas标签中设置宽高 <body> <canvas id="canvas

今天药忘吃喽~/ 2022年07月14日 09:25/ 0 赞/ 1232 阅读

相关动态宽高canvas img

作者：LoveEmperor-王子様 <!DOCTYPE html> <html lang="en"> <head> <met

布满荆棘的人生/ 2022年06月02日 06:40/ 0 赞/ 253 阅读

相关 html设置图片的宽高

一、HTML标签内控制宽度高度 img标签自带的属性：width和height；例如： <img src='图片地址' wid

梦里梦外;/ 2022年05月08日 13:16/ 0 赞/ 2203 阅读

相关关于HTML5中Canvas的宽、高设置有关问题

Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法：方法一： 1 方法二：使用HTML5 Canvas API操作 OK 1

「爱情、让人受尽委屈。」/ 2022年04月02日 05:20/ 0 赞/ 295 阅读

相关 html+css 设置select标签的宽高

思路 1、前提是设置边框 border: 1px solid \5cb85c; 2、设置宽高 -------------------- html+css 设置

阳光穿透心脏的1/2处/ 2022年02月18日 14:23/ 0 赞/ 757 阅读

相关 Canvas的宽与高

Canvas的默认宽高为宽`300px`，高`150px`。 ![\[外链图片转存失败(img-5WZDzMan-1562057711531)(http://note.you

ゝ一纸荒年。/ 2021年12月18日 16:29/ 0 赞/ 350 阅读