最近在学习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. 判断jQuery选择器结果为空 - CSDN博客

    原文:判断jQuery选择器结果为空 - CSDN博客 jQuery选择器获取到的是一个对象,所以无论页面上存在或者不存在元素,这个对象都不为空.因此,如果要使用jQuery检查元素再给某个页面上是否 ...

  2. Hadoop Streaming框架学习（二）

    1.常用Streaming命令介绍 使用下面的命令运行Streaming MapReduce程序: 1: $HADOOP_HOME/bin/hadoop/hadoop streaming args 其 ...

  3. 在Window和Linux下使用Zthread库（跨平台高级面向对象的线性和sycnchronization 库）

    ZThread库是一个开源的跨平台高级面向对象的线性和sycnchronization 库,以运行POSIX 和Win32 系统中的C++程序. ZThread库的主页:http://zthread. ...

  4. GO ：互联网时代的 C 语言！

    摘要: 每周为您推送最有价值的开源技术内参! 技术干货 标签:独家译文 1.Go 很好,为什么我们不使用它? 在这篇文章中,我将分享一下为什么我认为它很棒,使用它的一些缺点,以及为什么它还不是我们 Z ...

  5. file.delete()与file.deleteOnExit(); 的区别

    file.delete()   //删除文件,删除的是创建File对象时指定与之关联创建的那个文件.这是一个立刻执行的操作 file.deleteOnExit();   //在JVM进程退出的时候删除 ...

  6. 浅谈Linux（Centos7.4）环境下NTP服务器的构建

     一.软件环境 1.操作系统版本 [root@Geeklp201 etc]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core ...

  7. redis python 操作 Python操作Redis数据库

    原文章于此:https://www.cnblogs.com/cnkai/p/7642787.html 有个人修改与改正 Python操作Redis数据库   连接数据库 StrictRedisfrom ...

  8. hadoop之hive&hbase互操作

    大家都知道,hive的SQL操作非常方便,但是查询过程中需要启动MapReduce,无法做到实时响应. hbase是hadoop家族中的分布式数据库,与传统关系数据库不同,它底层采用列存储格式,扩展性 ...

  9. Codeforces Round #565 (Div. 3) B

    B. Merge it! 题目链接:http://codeforces.com/contest/1176/problem/B 题目 You are given an array a consistin ...

  10. K8s集群部署（四）------ Flannel网络部署

    所有节点都要部署Flannel网络,在所有节点操作. 1.为Flannel生成证书 [root@k8s-master ssl]# pwd /usr/local/src/ssl [root@k8s-ma ...