Canvas设置width和height问题
来源:互联网 发布:js 判断对象类型 兼容 编辑:程序博客网 时间:2024/05/29 09:24
首先HTML5中新增画布标签<canvas></canvas>,所以有些老版本的浏览器是不支持的
使用canvas标签需要知道以下几点:
1.需要在HTML文档中指明canvas标签,在canvas标签中需要写一些提示信息
<canvas id="canvas" width="500" height="500">
您的浏览器不支持Canvas
</canvas>
2.canvas元素默认大小是300px*150px,我们设置宽高的时候,需要使用canvas标签中的width和height属性,而不是css中的width和height属性
正确设置宽高写法是:
<canvas id="canvas" width="500" height="500">
您的浏览器不支持Canvas
</canvas>
错误设置宽高写法是:
<canvas id="canvas" style="width: 500px;height: 500px;">
您的浏览器不支持Canvas
</canvas>
这里在行内样式和内联样式中设置canvas的width和height都是错误的,
这样做会让canvas的宽高被拉伸或缩小,从而使得绘制的图形并不跟预想的一样。
如果这样说的不透彻的话,也可以这样理解:
比如我们在生活中要挑选一块画布用来画画,当我们去市集上挑选画布的时候,发现画布的尺寸大小有各种各样的,但是我们的画板大小是500*500的,所以我们需要挑选一块500*500的画布,在这里我们需要使用第一种写法:
<canvas id="canvas" width="500" height="500">
您的浏览器不支持Canvas
</canvas>
来挑选正确的合乎画板尺寸的画布,因为这种写法正好是为了我们挑选画布的尺寸而设计的。
买回来画布后,我们需要绘制更大更宽的画,所以我们把原来的画板尺寸增加了,但是我们又不想麻烦再跑市集一趟去挑选画布,这里假设我们之前买的画布是有弹性的,可以被拉伸并且可以正常使用。
这种情况下就可以使用css中的width和height属性设置画布的宽和高(行内样式和内联样式)来拉伸画布的大小,但是这里需要注意一点的是:我们是在画布默认尺寸大小300*150的基础上面拉伸的。但是经过拉伸后的画布在绘制图画的时候会跟预想的结果不太一样。
这里列举的例子是为了我们更好的理解这两种情况,至于为什么,浏览器或者HTML5特此为这两种需求而设置的两种不同的操作宽高的方法,我们记住可以了
- Canvas设置width和height问题
- Canvas设置width与height 的问题!
- canvas标签的width和height以及style.width和style.height的区别
- canvas标签的width和height以及style.width和style.height的区别
- canvas标签的width和height以及style.width和style.height的区别
- canvas的width和height属性的特殊之处
- Inkscape - canvas & resize (width/height)
- HTML5 Canvas 的width/height 与style.width/height
- Flex使用AS设置组件width和height的百分比
- img标签该不该设置width和height
- Jquery—获取和设置尺寸(width,height)
- Html canvas的width、height与在style中设置宽高的区别
- 开发日志:设置<DIV>内容不自动换行,及inline后width和height等失效的问题
- width和height使用规范
- Screen.Width 和 Screen.Height
- width,height的问题,span中line-height和padding区别
- 关于盒子的width,height设置
- 犀牛书一段话的理解-canvas width height
- Golang 中使用 JSON 的一些小技巧 陶文 陶文 3 个月前 有的时候上游传过来的字段是string类型的,但是我们却想用变成数字来使用。 本来用一个json:",string" 就可以支持了
- JQuery操作Table插件(未完善)
- Maven Archetype Plugin
- ios Selector() 与 #selector() 的不同之处,区别
- Java 字符串为 null 和 .lenght==0的区别
- Canvas设置width和height问题
- 从上到下打印二叉树
- 最基础的股市定律--支撑阻挡定律
- 【PAT】【Advanced Level】1096. Consecutive Factors (20)
- SQL开发技巧(二)
- 浮点三分模板
- 二叉搜索树的后序遍历序列
- 初探Java源码之ArrayList
- 一句话了解++i和i++的区别