canvas.width 和 它的style.width是不一样的:

canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高,

行间样式里如果你用vh和vw设置宽高,不好意思,不可以,统统按照px计算,

css里可以用vw,vh。但是,请记住,这里设置的是style.属性;

js里用带有单位的字符串比如vw和vh还有px,设置width和height,还是不好意思,不好使,

这样就不好使!!!

(style属性是表现在页面上的样式,不是canvas的本身的属性。一定要注意。随意设置style的宽高直接导致的结果就是画画变形变形变形)

好了,那么怎么做比较好?

我的做法是,要想自适应屏幕的大小。  可以在css里设置width(就是style.width )为vw单位的宽度;在js里获取它的width(canvas的属性)  然后赋值给 height。

canvas里设置width和css里设置width和js里设置width的区别的更多相关文章

  1. 【pyhon】Python里的字符串查找函数find和java,js里的indexOf相似,找到返回序号,找不到返回-1

    # 例子: target='www.163.com' ')) ')==-1: print('263不存在于字符串'+target+'中') 运行: C:\Users\horn1\Desktop\pyt ...

  2. 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)

    问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...

  3. 设置图层符号风格为用已有mxd里的同名图层风格

    //要加载的IFeatureClass IFeatureClass pFeatClass = dataset as IFeatureClass; //新建要加载到mxd文档中的图层 IFeatureL ...

  4. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  5. js 批量设置css样式

    在js中更换样式比较常见,但是批量设置比较少遇见: 但是在做就是插件时,不想额外的添加css文件(需要导入,还可能引起冲突),能批量设置就比较方便了. 以下代码是来自网上的三种方法,使用第二种最方便了 ...

  6. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS规范--春风十里不如写好CSS

    先吟几句: 最近看了看春风十里不如你,本来很少看剧的,暑假有点闲就看了,感觉不错,挺喜欢这部剧,就套了个名字,嘿嘿嘿.剧里面印象深刻的是<致橡树>这首诗,念几句: 我如果爱你,绝不像攀援的 ...

  8. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. css基础(css书写 背景设置 标签分类 css特性)

      css书写位置   行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link re ...

随机推荐

  1. 用分离、附加的方式实现sql server数据库的备份和还原

    一.数据库分离.附加的说明 SQL Server提供了"分离/附加"数据库."备份/还原"数据库.复制数据库等多种数据库的备份和恢复方法.这里介绍一种学习中常用 ...

  2. mysql基础SQL练习

    许久收藏的练习mysql语句的,现在看来任然有学习价值! 表如下: Student(Sid,Sname,Sage,Ssex) 学生表 Course(Cid,Cname,Tid) 课程表 SC(Sid, ...

  3. [转] 分组排序取前N条记录以及生成自动数字序列,类似group by后 limit

    前言:        同事的业务场景是,按照cid.author分组,再按照id倒叙,取出前2条记录出来.        oracle里面可以通过row_number() OVER (PARTITIO ...

  4. MySQL 中的运算符

    1.算数运算符 MySQL 支持的算术运算符包括加.减.乘.除和模运算. 运算符 作用 + 加法,获得一个或多个值的和 - 减法,从一个值中减去另一个值 * 乘法,得到两个或多个值的乘积 /,div ...

  5. springboot更换日志系统

    背景:springboot.2.1.2默认使用logback作为日志系统,我想禁用logback,换成效率更高的log4j2. 一.去除默认的logback依赖 1. 方法一 精准去除 depende ...

  6. 突破拐点:企业成长的S曲线

    1.企业成长的不同时期 初创期:初创前几年,最重要的创业激情,靠“蓝色小药丸”,断层期切入,不断试错玩命干(产品定位.商业模式.融资源.找关系.辅渠道),并最终完成赢利模式,得以生存. 成长期:通过快 ...

  7. Linux 系统 TCP优化

    这里主要是对<High performance Browser Networking>一书中关于TCP的描述的整理,本书与2013年出版,在书出版后,内核做了一些升级,有可能某些项不再适用 ...

  8. Kubernetes 1.12公布:Kubelet TLS Bootstrap与Azure虚拟机规模集(VMSS)迎来通用版本号

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/M2l0ZgSsVc7r69eFdTj/article/details/82880341 https: ...

  9. spring gateway 截取response 长度缺失

    网上找到一段获取修改response的代码:https://blog.csdn.net/tianyaleixiaowu/article/details/83618037 代码如下: import or ...

  10. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...