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. 使用python实现深度神经网络 4(转)

    https://blog.csdn.net/oxuzhenyi/article/details/73026807 使用浅层神经网络识别图片中的英文字母 一.实验介绍 1.1 实验内容 本次实验我们正式 ...

  2. CSS 小技巧(不定时更新)

    1.Web 文本中的省略号 在Web开发中,对于一种情况很常见.那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题.在今天HTML的标准中并没有相关 ...

  3. WSDL测试webservice接口记录

    收到一个事情,需要对接第三方API,对方给了个service,看了一下,原来是webservices的. 上一次测试webervice的接口,还是至少八九年前的时候了,这种相对比较老旧的也好久不在使用 ...

  4. CSS3制作图形大全——碉堡了

    为方便观看效果图,请移步原文:https://www.jqhtml.com/8045.html Square   #square {     width: 100px;     height: 100 ...

  5. 使用python实现测试工具(一)

    本系列教程我们将使用python实现一些简单的测试工具,为了尽可能的简单,我们的工具以命令行工具为主. 本系列教程使用的python版本是3.6.3. 背景 这一节我们实现简单的命令行发送get请求的 ...

  6. Unity应用架构设计(4)——设计可复用的SubView和SubViewModel(Part 2)

    在我们设计和开发应用程序时,经常要用到控件.比如开发一个客户端WinForm应用程序时,微软就为我们提供了若干控件,这些控件为我们提供了可被定制的属性和事件.属性可以更改它的外观,比如背景色,标题等, ...

  7. Git把Tag推送到远程仓库

    # 创建附注标签 $ git tag -a v0.1.2 -m “0.1.2版本” 列出标签 $ git tag # 在控制台打印出当前仓库的所有标签 $ git tag -l ‘v0.1.*’ # ...

  8. Spring-boot之 rabbitmq

    今天学习了下spring-boot接入rabbitmq. windows下的安装:https://www.cnblogs.com/ericli-ericli/p/5902270.html 使用博客:h ...

  9. 联想项目结束了,聊聊华为SAP HANA项目八卦

    联想项目结束了,聊聊华为SAP HANA项目八卦 [转] 本文目录 [隐藏] 1.故事线 2.华为的文化我们不懂 3.分分钟的文化冲突 4. 项目到底要做什么(待更新) 5.项目咋样了(待更新) 1. ...

  10. 【转】WPF Template模版之DataTemplate与ControlTemplate的关系和应用(二)

    1. DataTemplate和ControlTemplate的关系 学习过DataTemplate和ControlTemplate,你应该已经体会到,控件只是数据的行为和载体,是个抽象的概念,至于它 ...