一直很困惑为什么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标签里设置300*300px后，style设置成300*150px

<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的区别的更多相关文章

  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. 数据库表的约束constraints

    数据库表的约束constraints 数据完整性约束 表的数据有一定的取值范围和联系,多表之间的数据有时也有一定的参照关系. 在创建表和修改表时,可通过定义约束条件来保证数据的完整性和一致性. 约束条 ...

  2. springAOP实现方法运行时间统计

    aop的before和after,寻思分别在两个方法里获得当前时间,最后一减就可以了. 因此,今天就探讨了一下这个问题,和大家分享一下. 创建maven工程,引入spring的依赖包,配置好appli ...

  3. mongoDB使用小记

    1.简介: MongoDB是由c++语言编写的,基于分布式文件存储的开源数据库系统.MongoDB将数据存储为一个文档,数据结构有键-值对,类似于JSON对象. MongoDB其中的一些概念如下: M ...

  4. 51nod 1812 树的双直径 题解【树形DP】【贪心】

    老了-稍微麻烦一点的树形DP都想不到了. 题目描述 给定一棵树,边权是整数 \(c_i\) ,找出两条不相交的链(没有公共点),使得链长的乘积最大(链长定义为这条链上所有边的权值之和,如果这条链只有 ...

  5. 洛谷 P4248 / loj 2377 [AHOI2013] 差异 题解【后缀自动机】【树形DP】

    可能是一个 SAM 常用技巧?感觉 SAM 的基础题好多啊.. 题目描述 给定一个长度为 \(n\) 的字符串 \(S\) ,令 \(T_i\) 表示它从第 \(i\) 个字符开始的后缀,求: \[ ...

  6. Vue.js路由跳转带参数到模板组件。

    从SalesOrderQuery组件跳到SalesOrder组件,并且通过params属性携带数据. handleClick(row) { //alert(row.FSaleName);//获取该行F ...

  7. Timer分析

    学而时习之,不亦说乎!                              --<论语> Java的JDK中自带的任务调度实现.简单易用,源码也很清晰,总共由四个类组成,都在Time ...

  8. UML-6.1-用例-示例

    1.总览要点:用例.摘要.非正式.详述.测试用例.用例分析与迭代联系起来. 2.示例:Process Sale 1).客户携带所购商品到达收银台. 2).收银员使用pos系统记录每件商品. 操作契约: ...

  9. CentOS&.NET Core初试-4-安装守护服务(Supervisor)

    系列目录 CentOS的安装和网卡的配置 安装.NET Core SDK和发布网站 Nginx的安装和配置 安装守护服务(Supervisor) Supervisor是什么? Supervisor 是 ...

  10. Java 数组算法列题解析

    1.声明一个char类型的数组,  从键盘录入6个字符[1]遍历输出[2]排序[3]把char数组转化成一个逆序的数组 总结:分析问题时,先问自己,需要用到什么? 对于这题,第一步:先写一个main方 ...