最近因为工作需要，所以就学了一下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 的问题！的更多相关文章

  1. canvas的width和height设置问题

    最近在学习canvas属性中遇到一个小问题,就是canvas的width和height设置问题 代码如下: <!DOCTYPE html> <html lang="en&q ...

  2. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  3. canvas基础入门（一）canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  4. 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.

    1. embed 标签 支持  .swf 格式.     .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...

  5. Android开发遇到的问题：不给include设置width、height，导致ListView GridView内容无法显示

    我的目的是做一个带有TextView的ListView列表页面. 以下是这个页面的xml: <?xml version="1.0" encoding="utf-8& ...

  6. Canvas的width,height 和 样式中Canvas的width,height

    控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...

  7. 初学canvas，遇到width和height显示问题和用excanvas.js兼容IE问题

    /*-----------------------ITEYE 祈祷幸福博客原创,转载请注明.-------------------*/ 第一次认真写技术博客文~~~若有不严谨的地方,望指正. 今天是第 ...

  8. canvas里设置width和css里设置width和js里设置width的区别

    canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...

  9. 转：Canvas标签的width和height以及style.width和style.height的区别

    转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...

随机推荐

  1. iOS10之Expected App Behaviors

    昨天上架到appStore的时候碰到个问题,构建好后上传到itunesconnect的的包都用不了, 显示错误为:此构建版本无效. 或者英文显示为:ITC.apps.preReleaseBuild.e ...

  2. git添加GitHub远程库

    已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作 首先,登陆GitHub, ...

  3. keepalived 知识备注

    keepalived可用于配置nginx/lvs等负载均衡设备的双机热备. keepalived基于VRRP协议,简单的说就是两个物理路由节点(一主一备),虚拟成一个逻辑上的路由节点. 实际消息的路由 ...

  4. Entity Framework 6 Recipes 2nd Edition（13-8）译 -> 把昂贵的属性移到其它实体

    问题 你想把一个昂贵的属性移到另一个实体,这样你就可以延迟加载当前这个实体.对于一个加载昂贵的而且很少用到的属性尤其有用. 解决方案 模型和上一节(Recipes 13-7)的一致,如Figure13 ...

  5. [翻译]AKKA笔记 -ACTOR SUPERVISION - 8

    失败更像是分布式系统的一个特性.因此Akka用一个容忍失败的模型,在你的业务逻辑与失败处理逻辑(supervision逻辑)中间你能有一个清晰的边界.只需要一点点工作,这很赞.这就是我们要讨论的主题. ...

  6. SQLSERVER聚集索引与非聚集索引的再次研究（下）

    SQLSERVER聚集索引与非聚集索引的再次研究(下) 上篇主要说了聚集索引和简单介绍了一下非聚集索引,相信大家一定对聚集索引和非聚集索引开始有一点了解了. 这篇文章只是作为参考,里面的观点不一定正确 ...

  7. Windows 批处理

    1. 引言     在Windows上,经常需要做一些重复的工作.比如在不同的工作场所需要切换不同的ip:比如有时需要对一堆文件按1~n进行重命名:再比如我们需要删除一大堆文件,这些文件名字都差不多, ...

  8. 从零开始编写自己的C#框架（17）——Web层后端首页

    后端首页是管理员登陆后进入的第一个页面,主要是显示当前登陆用户信息.在线人数.菜单树列表.相关功能按键和系统介绍.让管理员能更方便的找到息想要的内容. 根据不同系统的需要,首页会显示不同的内容,比如显 ...

  9. SQL Tuning 基础概述02 - Explain plan的使用

    1.explain plan的使用 SQL> explain plan for delete from t_jingyu; Explained. SQL> select * from ta ...

  10. 嵌入式服务器jetty，让你更快开发web

    概述 jetty是什么? jetty是轻量级的web服务器和servlet引擎. 它的最大特点是:可以很方便的作为嵌入式服务器. 它是eclipse的一个开源项目.不用怀疑,就是你常用的那个eclip ...