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. Javascript数组(一)排序

    一.简介首先,我们来看一下JS中sort()和reverse()这两个函数的函数吧reverse();这个函数是用来进行倒序,这个没有什么可说的,所谓倒序就是大的在前面,小的在后面. 比如: var ...

  2. solr集群构建的基本流程介绍

    先从第一台solr服务器说起:1. 它首先启动一个嵌入式的Zookeeper服务器,作为集群状态信息的管理者,2. 将自己这个节点注册到/node_states/目录下3. 同时将自己注册到/live ...

  3. fopen_s遇到的一个问题

    今天使用公司代码的日志模块记录程序运行的相关信息,发现日志总是只有两条记录,即程序启动和结束,别的都没有.跟踪了很久,终于发现是日志输出模块被我修改了一个地方:把fopen改成了fopen_s,毕竟报 ...

  4. Activity class {com.../com....MainActivity} does not exist.

    报错信息如上图所示,解决步骤: 1. 首先是检查这个MainActivity.java是不是真的存在,且包名和路径无误: 2. 如果文件存在,且包名和路径没有问题,那么就打开你项目所在的/androi ...

  5. 对Faster R-CNN的理解(1)

    目标检测是一种基于目标几何和统计特征的图像分割,最新的进展一般是通过R-CNN(基于区域的卷积神经网络)来实现的,其中最重要的方法之一是Faster R-CNN. 1. 总体结构 Faster R-C ...

  6. mac 10.12 sierra 机械键盘+ratm可编程鼠标记录

      系统:mac 10.12 sierra 键盘:机械键盘 鼠标:mad catz ratm 在mac 10.11/10.12 之前: 机械键盘:一般的机械键盘在mac上使用, alt 和 win 键 ...

  7. mysql出现unblock with 'mysqladmin flush-hosts'

    朋友发来消息,说一个系统应用登录的时候提示连接超时,让帮忙处理一下.问他应用和数据库是否都正常,回复说数据库好像没有问题,但是应用日志报无法连接数据库. 数据库版本是:5.5.53 让他telnet数 ...

  8. CentOS 7下升级Python版本到3.x系列

    由于python官方已宣布2.x系列即将停止支持,为了向前看,我们升级系统的python版本为3.x系列服务器系统为当前最新的CentOS 7.4 1.安装前查看当前系统下的python版本号 # p ...

  9. 远程调试Android手机上网页的记录

    1.手机需要开启USB调试模式: 2.电脑和手机上都要安装最新的Chrome浏览器: 3.手机连接电脑,会出现下载安装驱动的提示并安装成功(并不是所有的手机都会这么顺利,比如我的魅族就无法安装驱动,公 ...

  10. JS 日期补0

    js日期需要yyyy-mm-dd的时候只显示yyyy-m-d,需要前面补充0,之前都是用的判断,感觉非常low.刚刚看到一个方法padStart用了用还不错,padStart是为数值补全指定位数,对应 ...