Canvas设置width与height 的问题！
最近因为工作需要，所以就学了一下Html中的Canvas标签。
当我看了一下教程后，自己写了一个hello world的时候，麻烦事就出现了。看下面代码：
<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas1" style="width: 200px;height: 200px; border:1px solid black;">
</canvas>
<script>
var oC = document.getElementById('canvas1');
var ctx = oC.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke();
</script>
</body>
</html>
上面代码的意思，是要在一个width和height各为200px的canvas上画一条直线，该直线的起点为(0,0)，终点为(200,200);
然而浏览器画出来的图像却是：
一看这图~怎么是这样的斜度？不应该啊~本应该是一个对角线才对啊~~
后来差了一下资料才知道，canvas标签设置width和height的时候，有以下几种方式和产生的后果：
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法：
方法一：
1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>
方法二：使用HTML5 Canvas API操作
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.width = 500;
3 canvas.width = 500;
若通过如下方法设置宽高，那么Canvas元素将由原来大小被拉伸到所设置的宽高：
方法一：使用CSS 会被拉伸
1 #欲操作canvas的id｛
2 width:1000px;
3 height:1000px;
4 ｝
也包含了行间样式中的 style="" 。也就是上面的例子，也会产生拉伸的情况。
方法二：使用HTML5 Canvas API操作 会被拉伸
1 var canvas = document.getElementById('欲操作canvas的id');
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";
方法三 ：用jquery的$("#id").width(500);会被拉伸
其它：canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示
所以，通过上面的资料便可知道其原因就是我上面例子中代码会让canvas的宽高被拉伸了，从而使得图像跟预想的不一致的。
现在我重写了一份正确设置canvas宽高大小的代码例子：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid black;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.moveTo(0, 0);
cxt.lineTo(200, 200);
cxt.stroke();
</script>
</body>
</html>
结果：
结束。
Canvas设置width与height 的问题！的更多相关文章
- canvas的width和height设置问题
最近在学习canvas属性中遇到一个小问题,就是canvas的width和height设置问题 代码如下: <!DOCTYPE html> <html lang="en&q ...
- H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
- canvas基础入门（一）canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
- Android开发遇到的问题：不给include设置width、height，导致ListView GridView内容无法显示
我的目的是做一个带有TextView的ListView列表页面. 以下是这个页面的xml: <?xml version="1.0" encoding="utf-8& ...
- Canvas的width,height 和 样式中Canvas的width,height
控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...
- 初学canvas，遇到width和height显示问题和用excanvas.js兼容IE问题
/*-----------------------ITEYE 祈祷幸福博客原创,转载请注明.-------------------*/ 第一次认真写技术博客文~~~若有不严谨的地方,望指正. 今天是第 ...
- canvas里设置width和css里设置width和js里设置width的区别
canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...
- 转：Canvas标签的width和height以及style.width和style.height的区别
转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...
随机推荐
- 机器指令翻译成 JavaScript —— No.3 流程分割
上一篇 我们讨论了跳转指令,并实现「正跳转」的翻译,但最终困在「负跳转」上.而且,由于线程模型的差异,我们不能 1:1 的翻译,必须对流程进行一些改造. 当初之所以选择翻译,而不是模拟,就是出于性能考 ...
- JavaScript dom 标签属性
节点: 平时开发中常用的节点是: 元素节点:nodeType值是 1 --> <a>,<p>...... 属性节点:nodeType值是 2 --> t ...
- substring的用法
public String substring(int beginIndex, int endIndex) 返回一个新字符串,它是此字符串的一个子字符串.该子字符串从指定的 beginIndex 处开 ...
- Windows 10 安装SVN 不显示状态图标--解决方法
升级win10以后,什么都正常,就是svn版本库图标不见了,图标的显示有助于我们定位代码的修改及提交情况,该怎么办呢? 下面分享详细的解决办法亲测有用: 其实也比较简单, 在注册表中找到此项: HKE ...
- [转]Linux下g++编译与使用静态库(.a)和动态库(.os) (+修正与解释)
在windows环境下,我们通常在IDE如VS的工程中开发C++项目,对于生成和使用静态库(*.lib)与动态库(*.dll)可能都已经比较熟悉,但是,在linux环境下,则是另一套模式,对应的静态库 ...
- 5.如何使主机和虚拟机IP处于同一网段（内网渗透专用）
先说一下正常流程: 1.打开虚拟机网络设置选项,选择桥接模式(Bridged)[如果是Kali 2.0的话,执行第一步后就OK了(90%)] 2.打开Kali里面的网络设置 3.设置一个ip4或者ip ...
- 【.NET深呼吸】应用上下文（AppContext）
在.net 4.6中新增了一个类,叫AppContext,这个家伙嘛,技术含量不算高,只不过是在编程的时候可以方便用用而已.应用上下文允许定义一个标识(用字符串表示),并且在应用程序运行期间可以切换状 ...
- Maven在Eclipse中的实用小技巧
前言 我们在开发的工程中很多都是Maven项目,这样更加便于我们jar包的管理.而我们一般使用的IDE都是Eclipse,由于我们在日常的开发过程中会经常要用到一些Maven的操作,所以我今天 ...
- 别语言之争了，最牛逼的语言不是.NET，也不是JAVA!
谁都不用说,博客园明显的偏.NET,C#的讨论一出现,推荐讨论热火朝天,而发点JAVA的东西,应者寥寥.一旦有出现两大派系的竞争,那绝对是头条.每天都看,早就麻木了. 研二的我浸淫.NET已经三四年, ...
- 计算机程序的思维逻辑 (33) - Joda-Time
Joda-Time上节介绍了JDK API中的日期和时间类,我们提到了JDK API的一些不足,并提到,实践中有一个广泛使用的日期和时间类库,Joda-Time,本节我们就来介绍Joda-Time.俗 ...