如题，相信很多人在初次玩canvas的时候会出现这样的情况，跟着教程走的情况下，诶

怎么画出来的东西，不怎么对劲啊，,,ԾㅂԾ,,！！！！！先上代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.      <style type="text/css">
  10.          * {
  11.              margin: 0;
  12.              padding: 0;
  13.          }
  14.  
  15.          #canvas {
  16.              border: 1px solid #000;
  17.              display: block;
  18.              margin: 10px auto;
  19.              width: 300px;
  20.              height: 300px;
  21.          }
  22.          #canvas2 {
  23.              /*border: 1px solid #000;*/
  24.              display: block;
  25.              margin: 10px auto;
  26.              /*width: 300px;
  27.              height: 300px;*/
  28.          }
  29.          #canvas3 {
  30.              border: 1px solid #000;
  31.              display: block;
  32.              margin: 10px auto;
  33.              width: 300px;
  34.              height: 300px;
  35.          }
  36.      </style>
  37.  </head>
  38.  
  39.  <body>
  40.  
  41.      <canvas id="canvas2" width="300" height="300" style="border:1px solid #d3d3d3;">
  42.  
  43.      </canvas>
  44.      <canvas id="canvas3"></canvas>
  45.      <script type="text/javascript">
  46.  
  47.          var canvas2 = document.getElementById("canvas2");
  48.          var content2 = canvas2.getContext("2d");
  49.  
  50.          content2.beginPath();
  51.          // rect(x,y,width,height)
  52.          // 以0,0为原点，设置宽100，高100的矩形
  53.          content2.rect(0,0,100,100);
  54.          content2.stroke();
  55.  
  56.          var canvas3 = document.getElementById("canvas3");
  57.          var content3 = canvas3.getContext("2d");
  58.  
  59.          content3.beginPath();
  60.          // rect(x,y,width,height)
  61.          // 以0,0为原点，设置宽100，高100的矩形
  62.          content3.rect(0,0,100,100);
  63.          content3.stroke();
  64.  
  65.      </script>
  66.  </body>
  67.  
  68.  </html>

再上效果图

两段代码都是一样的，为什么会出现自己画的矩形，高是宽的两倍呢！！！

我在网上找了以下，发现有人是这么解释的

attr设置的height/width（比如<canvas height=100/>），是实际有多少像素；

而通过css设置的height，表示显示出来的大小，并不会影响原本的像素数。

你的css的height和真实的height不匹配的话，就会出现scale（缩放扩大）的问题


可以从我的两段代码中看出来

    <canvas id="canvas2" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
    <canvas id="canvas3"></canvas>
我自己的写的样式是在CSS里面，而教程里的代码是直接写在canvas里面的
也就是说css定义的样式只是外观，canvas的大小还得在属性中定义。
以上

Canvas坐标轴中的Y轴距离是X轴的两倍的更多相关文章

  1. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

  2. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  3. 获取页面中任意一个元素距离body的偏移量

    //offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...

  4. 怎么在CAD中测量图纸距离？来看看这两种方法

    在CAD中设计图纸最重要的就是图纸的尺寸,俗话说也就是图纸间的距离.通过正确的数据设计出的图纸才能够准确,也能够避免施工时事不必要的误差.那怎么在CAD中测量图纸距离呢?具体要怎么来进行操作呢?下面我 ...

  5. Java中double类型的数据精确到小数点后两位

    Java中double类型的数据精确到小数点后两位 多余位四舍五入,四种方法 一: double f = 111231.5585;BigDecimal b = new BigDecimal(f); d ...

  6. js将一篇文章中多个连续的<br>标签替换成两个连续的<br>标签

    写本文的目的是今天恰好有一个之前做SEO的同事问我怎样把一篇文章中多个连续的br标签替换成两个连续的br标签,这里就牵涉到SEO层面的问题了. 在做SEO优化的时候,其中有一个需要注意的地方就是尽量减 ...

  7. vs中发布WebSever时启用HTTP-POST和HTTP-GET这两种协议

    一.问题介绍 在vs中建立一个websever项目时候默认是禁用HTTP-POST和HTTP-GET这两种协议的.但是如果你是在本机上去调试或者是在iis中浏览都会有HTTP-POST这种方式,因为这 ...

  8. Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  9. 【Java面试真题】剑指Offer53.2——0~n-1中缺失的数字（异或、二分两种解法）

    [Java实现]剑指Offer53.2--0~n-1中缺失的数字:面试真题,两种思路分享 前面有另一道面试题[Java实现]剑指offer53.1--在排序数组中查找数字(LeetCode34:在排序 ...

随机推荐

  1. 【编程工具】Sublime Text3快捷键配置

    我们在使用编译软件时,总是喜欢使用快捷键来方便我们的操作,但有些编译软件不支持快捷键的修改和设置,为了能够更加方便的使用 Sublime Text3,这里我介绍几个 Sublime Text3 设置快 ...

  2. 【LeetCode】Design Linked List(设计链表)

    这道题是LeetCode里的第707到题.这是在学习链表时碰见的. 题目要求: 设计链表的实现.您可以选择使用单链表或双链表.单链表中的节点应该具有两个属性:val 和 next.val 是当前节点的 ...

  3. 牛客网Wannafly模拟赛

    A矩阵 时间限制:1秒 空间限制:131072K 题目描述 给出一个n * m的矩阵.让你从中发现一个最大的正方形.使得这样子的正方形在矩阵中出现了至少两次.输出最大正方形的边长. 输入描述: 第一行 ...

  4. hdu2055

    #include <stdio.h> int init(char a){ if(a>='a'&&a<='z'){ ); }; } int main(){ int ...

  5. 编辑被标记为“只读”的Word文档

    从邮件接收到的Word文档,打开时总是被标记为“只读”,在阅读时对其进行编辑,但不能保存,会提示文档为只读的.要想对其进行编辑并保存,需要进行一定的操作. 进入文件所在的目录,鼠标右键点击Word文档 ...

  6. POJ-2002 Squares,哈希模板+数学公式！

                                                           Squares 题意:二维坐标轴给出n个点求有多少个正方形. 要是平时做比赛的话毫无疑问会 ...

  7. 查询UNDO使用情况

    查看UNDO事务占用情况 SELECT s.username, s.sid, pr.PID, s.OSUSER, s.MACHINE, s.PROGRAM, rs.segment_id, r.usn, ...

  8. BZOJ 1008: [HNOI2008]越狱【组合】

    很少有的思路秒解.题意可以描述成对长度为n的格子有m种染色方案,问存在相邻两个格子同色的方案数,正难则反易,考虑问题的背面任意两个相邻的格子都不同色,第一个格子可以涂任意一种颜色m种可能,剩下的n-1 ...

  9. P3799 妖梦拼木棒 (组合数学)

    题目背景 上道题中,妖梦斩了一地的木棒,现在她想要将木棒拼起来. 题目描述 有n根木棒,现在从中选4根,想要组成一个正三角形,问有几种选法? 输入输出格式 输入格式: 第一行一个整数n 第二行n个整数 ...

  10. EC++学习笔记(一) 习惯c++

    条款01:c++多范式编程语言 条款02:尽量以 const, enum, inline 替换#define 1. 提供类型安全检查 2. 去除函数调用开销 3. 避免宏的二义性 const doub ...