Canvas坐标轴中的Y轴距离是X轴的两倍
如题，相信很多人在初次玩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坐标轴中的Y轴距离是X轴的两倍的更多相关文章
- Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）
本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...
- Canvas绘图中的路径描边与填充
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- 获取页面中任意一个元素距离body的偏移量
//offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...
- 怎么在CAD中测量图纸距离？来看看这两种方法
在CAD中设计图纸最重要的就是图纸的尺寸,俗话说也就是图纸间的距离.通过正确的数据设计出的图纸才能够准确,也能够避免施工时事不必要的误差.那怎么在CAD中测量图纸距离呢?具体要怎么来进行操作呢?下面我 ...
- Java中double类型的数据精确到小数点后两位
Java中double类型的数据精确到小数点后两位 多余位四舍五入,四种方法 一: double f = 111231.5585;BigDecimal b = new BigDecimal(f); d ...
- js将一篇文章中多个连续的<br>标签替换成两个连续的<br>标签
写本文的目的是今天恰好有一个之前做SEO的同事问我怎样把一篇文章中多个连续的br标签替换成两个连续的br标签,这里就牵涉到SEO层面的问题了. 在做SEO优化的时候,其中有一个需要注意的地方就是尽量减 ...
- vs中发布WebSever时启用HTTP-POST和HTTP-GET这两种协议
一.问题介绍 在vs中建立一个websever项目时候默认是禁用HTTP-POST和HTTP-GET这两种协议的.但是如果你是在本机上去调试或者是在iis中浏览都会有HTTP-POST这种方式,因为这 ...
- Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
- 【Java面试真题】剑指Offer53.2——0~n-1中缺失的数字（异或、二分两种解法）
[Java实现]剑指Offer53.2--0~n-1中缺失的数字:面试真题,两种思路分享 前面有另一道面试题[Java实现]剑指offer53.1--在排序数组中查找数字(LeetCode34:在排序 ...
随机推荐
- HDU 5536 Chip Factory
Chip Factory Time Limit: 18000/9000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)T ...
- B. Balanced Lineup
B. Balanced Lineup Time Limit: 5000ms Case Time Limit: 5000ms Memory Limit: 65536KB 64-bit integer ...
- A Survey of Model Compression and Acceleration for Deep Neural Network时s
A Survey of Model Compression and Acceleration for Deep Neural Network时s 本文全面概述了深度神经网络的压缩方法,主要可分为参数修 ...
- zoj 2104 Let the Balloon Rise
Let the Balloon Rise Time Limit: 2 Seconds Memory Limit: 65536 KB Contest time again! How excit ...
- HDU-5317 RGCDQ ,暴力打表！
RGCDQ 暴力水题,很可惜比赛时没有做出来,理清思路是很简单的. 题意:定义f(i)表示i的素因子个数,给你一段区间[l,r],求max_gcd(f(i),f(j)).具体细节参考题目. 思路:数据 ...
- HDU-1532 Drainage Ditches，人生第一道网络流！
Drainage Ditches 自己拉的专题里面没有这题,网上找博客学习网络流的时候看到闯亮学长的博客然后看到这个网络流入门题!随手一敲WA了几发看讨论区才发现坑点! 本题采用的是Edmonds-K ...
- Android隐藏软键盘收回软键盘
代码改变世界 Android隐藏软键盘收回软键盘 InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPU ...
- 【Luogu】P3387缩点（Tarjan缩点+深搜DP）
题没什么好说的,因为是模板题.求值我用的是dfs. 不能直接在原图上dfs,因为原图上有环的话会发生一些滑稽的事情.所以我们要用Tarjan缩点.因为此题点权全为正,所以如果在图上走一个环当然可以全走 ...
- 常州模拟赛d3t3 两只怪物心心相印
题目背景 从前我是一位无名的旅人,旅途中我得到了某样东西:贤者之石.我因此得到悠久的时光和漂泊的生命.1897年冬天,我一时兴起舍弃了旅人的生活. 贤者之石创造出来的,是货真价实的黄金.我的名声传遍了 ...
- poj1930 数论
Dead Fraction Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1258 Accepted: 379 Desc ...