最近在学习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. UWP入门（十）--创建、写入和读取文件

    原文:UWP入门(十)--创建.写入和读取文件 核心的 API github代码 StorageFolder 类 StorageFile 类 FileIO 类 使用 StorageFile 对象读取和 ...

  2. Win10的UWP之标题栏的返回键(二)

    原文:Win10的UWP之标题栏的返回键(二) 关于Win10的UWP的返回键的第二种处理的方法,是介于标题栏的强行修改,不是像上期的那样直接调用系统内置的API. - - - - - - - - - ...

  3. RapidJSON 1.0 正式版发布，C++的JSON开发包

    分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSAp ...

  4. Delphi 7下IGDIPlus库的使用

    IGDI+是一个免费开源封装微软GDI+功能的Delphi库,该库使得可以用Delphi语言代码快速简短的实现复杂GDI+应用程序.官方网站:http://www.mitov.com/html/igd ...

  5. c# winform快捷键实现

    我们在软件中经常用到快捷键,这里整理备份一下. 首先我们要定义可以作为快捷键的按键,以下是整理的 一些,自己可以根据情况来修改 public static Dictionary<int, str ...

  6. Delphi 使用双缓冲解决图片切换时的闪烁问题 good

    var TempCanvas: TCanvas; BufDC: HDC; BufBitmap: HBITMAP; begin // 创建一个与显示设备兼容的内存设备 BufDC := CreateCo ...

  7. Linux命令行和shell编程

    Shell Shell是一个程序,用户输入的命令通过shell来传达给内核或其它程序.用户在linux打开一个终端,终端就会自动调用用户的shell. Linux上的Shell有很多种,用的最多是sh ...

  8. Codility--- Triangle

    Task description A zero-indexed array A consisting of N integers is given. A triplet (P, Q, R) is tr ...

  9. java高级知识

    1. Spring读取配置文件的流程,怎样引入注解? 2. Spring是怎么注入新的java文件的? 3. CAS锁是什么实现机制,在java的哪些包里最常使用?什么情况下会使用CAS锁? 4. 线 ...

  10. SYN4201型 同步分频钟

    SYN4201型 同步分频钟 产品概述 SYN4201型同步分频钟是由西安同步电子科技有限公司精心设计.自行研发生产的一款高精度分频时钟,对输入的8路10MHz正弦信号分别进行同步分频处理,相应的输出 ...