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. header 跳转时报错误。Header may not contain more than a single header, new line detected

    我在用php的header做跳转时,报错误. Header may not contain more than a single header, new line detected 先贴一下代码: c ...

  2. C# MemoryCache GCHandle

    MemoryCache在项目中用了很久,感觉比较简单,以前也看过里面的源代码,主要借用MemoryCacheStore来完成数据的存储,里面是线程安全的,MemoryCacheStore借用Hasht ...

  3. 阿里云配置gitlab邮箱

    gitlab_rails['gitlab_email_from'] = 'username@163.com' user['git_user_email'] = "username@163.c ...

  4. C# System.IO.FileMode

    字段 Append 6 若存在文件,则打开该文件并查找到文件尾,或者创建一个新文件. 这需要 Append 权限. FileMode.Append 只能与 FileAccess.Write 一起使用. ...

  5. 转载:MVC升级以后出现"当前上下文中不存在ViewBag"的问题解决

    MVC升级以后出现"当前上下文中不存在ViewBag"的问题解决 把自己的项目从MVC4升级到了MVC5,结果问题一大堆,View的设计环境出现了"当前上下文中不存在Vi ...

  6. RobotFrameWork接口设计规范

    1. 前言 继前面一章<RobotFramework环境搭建>介绍了在本地如何将接口自动化实施过程所需要的基础环境搭建好,在这里假设大家都已经知道环境如何搭建了,如果不清楚的可直接查看上一 ...

  7. BOOST 线程完全攻略

    1 创建线程 首先看看boost::thread的构造函数吧,boost::thread有两个构造函数: (1)thread():构造一个表示当前执行线程的线程对象: (2)explicit thre ...

  8. linux驱动面试题整理

    1.字符型驱动设备你是怎么创建设备文件的,就是/dev/下面的设备文件,供上层应用程序打开使用的文件? 答:mknod命令结合设备的主设备号和次设备号,可创建一个设备文件. 评:这只是其中一种方式,也 ...

  9. linux内核剖析(七)Linux进程间通信的几种方式总结

    进程间通信概述 进程通信的目的 数据传输 一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几M字节之间 共享数据 多个进程想要操作共享数据,一个进程对共享数据 通知事 一个进程需要向另 ...

  10. PHP 开发者的 Docker 之旅

    用 PHP 作为我们「Docker 开发大礼包」开篇是带着一些朝圣的心情的.这是一门堪称「古老」的语言,这也是一门争议最多的语言,这更是一门不断涅槃的语言.「PHP 是最好的语言」这个流传已久的梗,或 ...