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

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         #canvas {

             border: 1px solid #000;

             display: block;

             margin: 10px auto;

             width: 300px;

             height: 300px;

         }

         #canvas2 {

             /*border: 1px solid #000;*/

             display: block;

             margin: 10px auto;

             /*width: 300px;

             height: 300px;*/

         }

         #canvas3 {

             border: 1px solid #000;

             display: block;

             margin: 10px auto;

             width: 300px;

             height: 300px;

         }

     </style>

 </head>

 <body>

     <canvas id="canvas2" width="300" height="300" style="border:1px solid #d3d3d3;">

     </canvas>

     <canvas id="canvas3"></canvas>

     <script type="text/javascript">

         var canvas2 = document.getElementById("canvas2");

         var content2 = canvas2.getContext("2d");

         content2.beginPath();

         // rect(x,y,width,height)

         // 以0,0为原点，设置宽100，高100的矩形

         content2.rect(0,0,100,100);

         content2.stroke();

         var canvas3 = document.getElementById("canvas3");

         var content3 = canvas3.getContext("2d");

         content3.beginPath();

         // rect(x,y,width,height)

         // 以0,0为原点，设置宽100，高100的矩形

         content3.rect(0,0,100,100);

         content3.stroke();

     </script>

 </body>

 </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. 图论trainning-part-1 H. Qin Shi Huang's National Road System

    H. Qin Shi Huang's National Road System Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO f ...

  2. [android开发篇]自定义权限

    有时候,我们可能遇到如下需求场景:当用户在一个应用程序中进行某项操作时,会启动另外一个应用程序,最常见的时直接打开了另外一个应用程序,并进入其中某个Activity(如:有的应用中有推荐应用列表,当用 ...

  3. php 注册与登录

    <body background="timg.jpg"><div class="dak"> <div class="zu ...

  4. ASP.NET（二）：Application、Session和Server对象

    导读:在上篇博客中,总结了:Reques对象和Response对象的区别,以及IsPostBack属性的用法.其中说明Asp.net有6大对象,那么,这次就介绍剩下的3个对象,分别是:Applicat ...

  5. BZOJ 3529 [Sdoi2014]数表 ——莫比乌斯反演 树状数组

    $ans=\sum_{i=1}^n\sum_{j=1}^n\sigma(gcd(i,j))$ 枚举gcd为d的所有数得到 $ans=\sum_{d<=n}\sigma(d)*g(d)$ $g(d ...

  6. Spoj-VISIBLEBOX Decreasing Number of Visible Box

    Shadowman loves to collect box but his roommates woogieman and itman don't like box and so shadowman ...

  7. #1045 - Access denied for user 'root'@'localhost' (using password: NO)的问题

    问题描述:  修改了root的密码,然后在http://localhost/phpmyadmin下无法登录了  报错:#1045 - Access denied for user 'root'@'lo ...

  8. hdu 5288 ZCC loves straight flush

    传送门 ZCC loves straight flush Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K ...

  9. Python入门--7--元祖：列表的顽固亲戚

    一.创建和访问一个元祖 zheshiyige_yuanzu=(1,2,3,4,5,6) #创建一个元祖 zheshiyige_yuanzu[1] #打印第二个元素 zheshiyige_yuanzu[ ...

  10. LeetCode OJ--Search in Rotated Sorted Array

    http://oj.leetcode.com/problems/search-in-rotated-sorted-array/ 转换了一次的有序数组,进行类似二分查找. 从begin到mid和从mid ...