为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别

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

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

> 结论写在头

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

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

下面看例子：

> 默认状态

<style>

	body{background:black;}

	#c{background: yellow;}

	div{background: pink;width: 300px;height: 150px;}

</style>

<script>

	window.onload = function(){

		var oC = document.getElementById('c');

		var oGC = oC.getContext('2d');

		oGC.strokeRect(50,50,100,100);

	}

</script>

<body>

	<canvas id="c"></canvas>

	<div>width: 300px; height: 150px;</div>

</body>

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

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

<!--其他代码同上-->

<body>

	<canvas id="c" width = "300px" height = "300px""></canvas>

	<div>width: 300px; height: 150px;</div>

</body>

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

> 在canvas标签里设置300300px后，style设置成300150px

<style>

	body{background:black;}

	#c{background: yellow;width: 300px;height: 150px;}

	div{background: pink;width: 300px;height: 150px;}

</style>

<script>

	//同上

</script>

<body>

	<canvas id="c" width = "300px" height = "300px""></canvas>

	<div>width: 300px; height: 150px;</div>

</body>

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

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

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

如何设置a标签的宽高，如何使a标签的文字垂直居中
通常情况下a标签是没有宽高的,设置 width 和 height 没有作用. 若要使用 width 和 height,需要把a标签转为块级元素,即:display:block|inline-block ...
leangoo更换背景、设置颜色标签功能上线啦！
leangoo看板背景太单调?卡片标签想要添加多个?没有问题,Leangoo的本次更新就给大家带来了漂亮背景和实用的颜色标签设置,接下来就让我们一起来看看吧! 设置背景: 点击看板右上角个人头像图标按 ...
VS Code中编写html(4) 标签的宽高颜色背景设置
1 <!+Tab键-->  <div id="div1">第一个div标签:& ...
VS Code中编写html(3) 标签的宽高颜色背景设置
1 创建一个div标签: <body> <div> 这是一个div标签: </div> </body> 变成了圆圆的,是因为后面有设置了样式: back ...
有两种分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0，隐藏播放器。
<bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多.如下 <bgsound src="your.mid" ...
局部（或全局）设置<a>标签的target属性
对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大大的提高访客的体验感.我们一般对target的设置可以挨个来,但 ...
[Java] 解决spring的xml标签内不能自由增加说明的难题，方便调试、部署时进行批量屏蔽
作者:zyl910 以往我们想在spring的xml配置文件中增加说明文本时,只能使用xml注释().这对于"调试.部署时想批量屏蔽部分bean" ...
white-space 属性设置如何处理元素内的空白
定义和用法white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. 默认值: ...
在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?
此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...

随机推荐

(转载）一位资深程序员大牛给予Java初学者的学习建议
这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议? 今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈每个阶段要 ...
linux 系统管理(三) 系统信息查看 inx
inxi infomation x i (信息每个人都爱) Inxi 最初是为控制台和 IRC(网络中继聊天)开发的一个强大且优秀的命令行系统信息脚本.可以使用它获取用户的硬件和系统信息,它也用于调试 ...
解决Maven本地仓库没有Jar包问题，请求中央仓库自动下载以及手动下载方法
一.首先指定本地仓库 <localRepository>D:\software\Maven_Home\mvn_repository</localRepository> 二.修改 ...
java centos7配置查看jdk环境变量
[root@bogon java-1.8.0-openjdk-1.8.0.212.b04-0.el7_6.x86_64]# which java/usr/bin/java[root@bogon jav ...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
Oracle 通过子查询批量添加、修改表数据
1.通过查询快速创建表 create table test1(id,job,mgr,sal) as () ) ---这是一个分页查询 ok,表创建成功 2.通过查询快速创建视图 create or r ...
Python爬虫抓取某音乐网站MP3（下载歌曲、存入Sqlite）
最近右胳膊受伤,打了石膏在家休息.为了实现之前的想法,就用左手打字.写代码,查资料完成了这个资源小爬虫.网页爬虫, 最主要的是协议分析(必须要弄清楚自己的目的),另外就是要考虑对爬取的数据归类,存储. ...
Program, Process and Thread
A program is an executable file store. A process is a running program. A thread is a single sequence ...
hibernate 中对象的3种状态总结
1.Hibernate把对象分文三种状态:Transient(临时状态).Persistent(持久化状态).Detached(游离状态). 1)Transient:刚刚new出来的对象,就是Tran ...
Java线程池——ThreadPoolExecutor的使用
1 线程池的创建 ThreadPoolExecutor有以下四个构造方法 ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long ...