最近在学习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. QT中的SOCKET编程

    转自:http://mylovejsj.blog.163.com/blog/static/38673975200892010842865/ QT中的SOCKET编程 2008-10-07 23:13 ...

  2. 【转载】Chrome使用自定义协议打开本地程序并运行IE打开网页

    部分内容转载自: http://blog.sina.com.cn/s/blog_e2b8213a0102wqby.html 项目中遇到某需求:chorme要运行IE并打开网页.解决方案之一就是通过自定 ...

  3. SpringBoot(十九)_spring.profiles.active=@profiles.active@ 的使用

    现在在的公司用spring.profiles.active=@profiles.active@ 当我看到这个的时候,一脸蒙蔽,这个@ 是啥意思. 这里其实是配合 maven profile进行选择不同 ...

  4. 机器学习之支持向量机原理和sklearn实践

    1. 场景描述 问题:如何对对下图的线性可分数据集和线性不可分数据集进行分类? 思路: (1)对线性可分数据集找到最优分割超平面 (2)将线性不可分数据集通过某种方法转换为线性可分数据集 下面将带着这 ...

  5. 迁移桌面程序到MS Store（9）——APPX With Desktop Extension

    在<迁移桌面程序到MS Store(8)——通过APPX下载Win32Component>中我们讨论了通过APPX来下载Service部分的安装包.但是纯UWP的客户端并不能自动运行下载的 ...

  6. 安装Flume——海量日志收集聚合系统

    下载flume:  1.官方网站下载: http://flume.apache.org/download.html 2.百度网盘资源: apache-flume-1.9.0-bin.tar 链接:ht ...

  7. 建立自己composer私有仓库

    创建仓库地址以gitee为例,主要github太慢 本地建立一个项目目录,然后初始化 composer init 然后根路径下创建src/util目录 修改composer.json,设置autolo ...

  8. mvc中的表现和数据分离怎么理解？

    使用过 JavaScript框架(如 AngularJS, Backbone)的人都很熟悉在UI(用户界面,前端)中mvc的工作机理.这些框架实现了MVC,使得在一个单页面中实现根据需要变化视图时更加 ...

  9. PHP弱类型总结

    0x01:“==”和“===” PHP中有两种比较符号,“==”与“===”.“==”我们称之为等值符,当等号两边为相同类型时,直接比较值是否相等:当等号两边类型不同时,先转换为相同的类型,再对转换后 ...

  10. Ceph原理动画演示

    动图生动刻画Ceph的基本原理之集群搭建及数据写入流程:)