一直很困惑为什么canvas标签和其他标签不一样，宽高需要设置在canvas标签里，设置在style里就会有问题。

纯粹个人理解，有错误欢迎指出。

> 结论写在头

设置在style里有问题其实是因为：

canvas标签里的宽高是相当于定义画布的大小（默认宽300px，高150px）。在定义了画布之后，canvas就相当于一张图片了，类似于img，所以这个时候再设置宽高，就会把canvas拉伸成style里设置的宽高了。

下面看例子：

> 默认状态

  1. <style>
  2. 	body{background:black;}
  3. 	#c{background: yellow;}
  4. 	div{background: pink;width: 300px;height: 150px;}
  5. </style>
  6. <script>
  7. 	window.onload = function(){
  8. 		var oC = document.getElementById('c');
  9. 		var oGC = oC.getContext('2d');
  11. 		oGC.strokeRect(50,50,100,100);
  12. 	}
  13. </script>
  15. <body>
  16. 	<canvas id="c"></canvas>
  17. 	<div>width: 300px; height: 150px;</div>
  18. </body>

在canvas画布下加了一个DIV，可以看到画布的默认大小是300*150px的。

> 在canvas标签里设置300*300px

  1. <!--其他代码同上-->
  2. <body>
  3. 	<canvas id="c" width = "300px" height = "300px""></canvas>
  4. 	<div>width: 300px; height: 150px;</div>
  5. </body>

这里要注意在canvas标签里设置宽高的方式，是直接写width = "300px" height = "300px"，而不是以行间样式的方式设置的。

> 在canvas标签里设置300*300px后，style设置成300*150px

  1. <style>
  2. 	body{background:black;}
  3. 	#c{background: yellow;width: 300px;height: 150px;}
  4. 	div{background: pink;width: 300px;height: 150px;}
  5. </style>
  6. <script>
  7. 	//同上
  8. </script>
  10. <body>
  11. 	<canvas id="c" width = "300px" height = "300px""></canvas>
  12. 	<div>width: 300px; height: 150px;</div>
  13. </body>

可以看到，canvas画布的大小的确是被设置成300*150px了，但里面的内容却被压缩了。

相当于一张300*300px的图片，被设置为300*150px，所以参考的长方形被压短了一半。

为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别的更多相关文章

  1. 如何设置a标签的宽高，如何使a标签的文字垂直居中

    通常情况下a标签是没有宽高的,设置 width 和 height 没有作用. 若要使用 width 和 height,需要把a标签转为块级元素,即:display:block|inline-block ...

  2. leangoo更换背景、设置颜色标签功能上线啦！

    leangoo看板背景太单调?卡片标签想要添加多个?没有问题,Leangoo的本次更新就给大家带来了漂亮背景和实用的颜色标签设置,接下来就让我们一起来看看吧! 设置背景: 点击看板右上角个人头像图标按 ...

  3. VS Code中编写html(4) 标签的宽高颜色背景设置

    1  <!+Tab键--> <!--有两个div标签时,分别设置style,有两种方法--> <div id="div1">第一个div标签:& ...

  4. VS Code中编写html(3) 标签的宽高颜色背景设置

    1 创建一个div标签: <body> <div> 这是一个div标签: </div> </body> 变成了圆圆的,是因为后面有设置了样式: back ...

  5. 有两种分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0，隐藏播放器。

     <bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多.如下 <bgsound src="your.mid" ...

  6. 局部（或全局）设置<a>标签的target属性

            对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大大的提高访客的体验感.我们一般对target的设置可以挨个来,但 ...

  7. [Java] 解决spring的xml标签内不能自由增加说明的难题，方便调试、部署时进行批量屏蔽

    作者:zyl910 以往我们想在spring的xml配置文件中增加说明文本时,只能使用xml注释(<!-- 注释 -->).这对于"调试.部署时想批量屏蔽部分bean" ...

  8. white-space 属性设置如何处理元素内的空白

    定义和用法white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. 默认值: ...

  9. 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

    此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...

随机推荐

  1. js 实现全国省市区三级联动

    效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  2. 高阶篇：4.1.2.2）产品部件级别的QFDII

    本章目的:介绍产品部件级别的QFDII编写方法. 1.前言 这章接前面总成级别的QFDII. 产品部件级别的QFDII,其实就是将部件QFDII所得到的设计要求,进一步分配给部件其装配层级的零部件中. ...

  3. 分分钟钟学会Python -基础&运算符

    day002 基础&运算符 1.循环语句 ### 1.循环格式 while 条件: print('') ''' while True: print('人生苦短,我用Python.') ''' ...

  4. 文献综述十四：基于Oracle11g的超市进销存管理系统设计与实现

    一.基本信息 标题:基于Oracle11g的超市进销存管理系统设计与实现 时间:2016 出版源:技术创新 文件分类:对数据库的研究 二.研究背景 为超市设计开发的超市管理系统,采用的是 VC+ Or ...

  5. Flexbox 完全指南

    Flexbox 完全指南 我不是这篇文章的原创作者,我只是好文章的搬运工.原文地址 A Complete Guide to Flexbox 应用于 flex container 的属性 display ...

  6. Flyway-使用步骤

      1.创建一个Maven项目 2.编辑当下的pom.xml,添加flyway依赖和Mysql依赖 <project ...> ... <dependencies> <d ...

  7. Linux~win10上开启ubuntu子系统

    在进行win10之后,我们可以在它上面安装一个linux子系统,然后就可以使用linux了,你不需要安装虚拟机,也不需要安装双系统! 1 通过Win10任务栏中的Cortana搜索框搜索打开“启用或关 ...

  8. [转]js和jquery获取窗体高度

    JQuery获取浏览器窗口宽高,文档宽高 2010-01-20 08:59<script type="text/javascript">$(document).read ...

  9. java 如何下载jar包

    随着maven工具的使用,我们已经不再需要辛苦的找jar包,也不需要再买会员去下载jar包,但是还有一些同学,不知道怎么下载jar包,下面我给大家介绍一下,如何潇洒的找到自己想要的jar包. 首先,访 ...

  10. java.lang.RuntimeException Unable to instantiate application Caused by: java

    参考:http://blog.csdn.net/xufazhong/article/details/71155528 dependencies { classpath 'com.android.too ...