最近在学习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. 解释下Func<T, bool> exp

    比如 interface IRepository<T> where T:class { IEnumerable<T> FindAll(Func<T, bool> e ...

  2. SQLite的使用（包括编译安装的步骤）

    SQLite官网http://www.sqlite.org/ SQLite简介 SQLite是一款轻型的数据库,是遵守ACID(原子性.一致性.隔离性和持久性)的关系式数据库管理系统.SQLite实现 ...

  3. 留存： struts2+jquery+json集成

    原文地址:struts2+jquery+json集成 以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...

  4. java代码块牛刀小试

    牛刀小试1. 试一把静态代码块.实例化代码块和构造函数的执行顺序 public class People { public static int num = 0;//静态变量初始化 String na ...

  5. 跟我学SpringCloud | 第二篇：注册中心Eureka

    Eureka是Netflix开源的一款提供服务注册和发现的产品,它提供了完整的Service Registry和Service Discovery实现.也是springcloud体系中最重要最核心的组 ...

  6. 关于vue中使用rem问题

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  7. 系统学习 Java IO (十一)----打印流 PrintStream

    目录:系统学习 Java IO---- 目录,概览 PrintStream 类可以将格式化数据写入底层 OutputStream 或者直接写入 File 对象. PrintStream 类可以格式化基 ...

  8. http协议之状态码

    =================状态码,状态文字======================== 状态码:用来反应服务器的响应状态 状态文字:是用来说明状态码的. 状态码:可以分为这5个大的部分 - ...

  9. Xmanager 5远程连接CentOS7图形化界面

    1.安装Xmanager 5下载链接:https://pan.baidu.com/s/1JwBk3UB4ErIDheivKv4-NA提取码:cw04 双击xmgr5_wm.exe进行安装 点击‘下一步 ...

  10. 真实项目中 ThreadLocal 的妙用

    一.什么是 ThreadLocal ThreadLocal 提供了线程的局部变量,每个线程都可以通过 set() 和 get() 来对这个局部变量进行操作,但不会和其他线程的局部变量冲突,实现了线程间 ...