最近在学习canvas属性中遇到一个小问题，就是canvas的width和height设置问题

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         #canvas{

             width: 200px;

             height: 200px;

             background: #0f0;

         }

     </style>

 </head>

 <body>

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

     <script>

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

         var context=c.getContext('2d');。

         context.moveTo(0,0);

         context.lineTo(200,200);

         context.stroke();

     </script>

 </body>

 </html>

代码看上去没有问题，按照预想的话，应该会出现一个连接（0，0）和（200，200）两个坐标的斜线。

但结果是：

终点坐标直接指向了（100，200）的位置。

于是我尝试用

<canvas id="canvas" style="width: 200px;height: 200px;" >

去定义canvas，发现结果还是一样的。

当我不设置宽高时，发现canvas的宽高默认为300*150

我直接设置canvas的宽高属性：

<canvas id="canvas" width="200" height= "200" >

这样就没有问题了。

通过上述尝试我得出一些我的结论（错了勿喷）：

因为canvas自己有默认宽高，当用嵌入式或者内联式改变宽高时，canvas会按比例改变。可以看作连线是最开始进行的，此时连线是从（0,0）到（200,200）

但是因为200已经超过canvas的默认高度，所以在canvas中他的终点在（150，150）

所以改变canvas宽度为200之后，斜线终点仍然是宽度的一半，为（100，150）

同理，改变了canvas的高度，就只是高度改变而已，终点仍然是宽度的一半，为（100，200）

通俗的来讲就是把canvas和canvas中的斜线看成一个图片，无论如何拉伸，斜线始终指着底边终点。

然而如果设置canvas的宽高属性，就相当于把他的初始值改变了，那么就不会出现上面的问题。

canvas的width和height设置问题的更多相关文章

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

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

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

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

  3. Canvas设置width与height 的问题！

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...

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

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

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

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

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

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

  7. 在canvas标签和style中定义width和height

    在canvas标签中定义width.height跟在style中定义width.height是不同的.canvas标签的width和height是画布实际宽度和高度,就是在这个上面绘制图形.style ...

  8. H5_0009：关于HTML5中Canvas的宽、高设置问题

    关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一:        <canvas widt ...

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

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

随机推荐

  1. java模拟post请求发送json数据

    import com.alibaba.fastjson.JSONObject; import org.apache.http.client.methods.CloseableHttpResponse; ...

  2. wp8.1之拍照（获取焦点，使用后置摄像头）

    wp8.1 没有像wp8一样直接用启动器开启摄像头,他要开启摄像头要借助CaptureElement呈现来自捕获设备(如照相机或网络摄像机)的流.今天讲讲如何打开摄像头,获取焦点,以及拍照.废话不多说 ...

  3. Office Add-in Model 为 Outlook Mail Add-in 提供的 JavaScript API 介绍

    本文所讨论的 Mailbox API是指在 Mail Add-in 中可调用的 JavaScript API.开发者可以利用这些API 实现 Add-in 和 Outlook 的交互(数据读取与写入) ...

  4. QT5---应用程序发布（使用windeployqt和NSIS）

      采用动态编译的方式发布程序,即release版本. 找齐动态依赖库(.dll) 方法一   用Dependency Walker这个工具去找少了那些dll,不过这个工具也不怎么靠谱,一个比较靠谱但 ...

  5. qtablewidget qss加上这个，QHeaderView::section

     qtablewidget  qss加上这个,QHeaderView::section {    color: white;    padding: 4px;    height:24px;    b ...

  6. 取得文件夹内容信息（使用IShellFolder接口）

    翻译自MSDN 2005 -> Win32 和 COM 开发 -> User Interface -> Windows User Experience -> Windows S ...

  7. php身份证号的验证

    //身份证号验证 03 protected function checkIdCard(){ 04 if(empty($_POST['idcard'])){ 05 return false; 06 } ...

  8. 打包成war包之后如何读取配置文件

    今天工作开发中遇到一个问题:在idea运行的项目读取配置文件没有问题,打包成war包之后就会报错java.io.FileNotFoundException: class path resource 原 ...

  9. MCtalk对话学吧课堂：真正的K12在线教育才刚刚开始

    课堂之外的在线教育已经被大部分家庭所熟知,既涌现出了VIPKID等行业独角兽,也有大量致力于科技改变教育的新兴机构获得了快速成长.成立于2014年的学吧课堂就是专注在K12在线教育领域的创新机构,他们 ...

  10. Python自学day-8

    一.SocketServer 简化了编写网络服务器的难度. SocketServer一共有如下几个类型: socketserver.TCPServer :提供一个TCP的socketserver. s ...