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:在排序 ...
随机推荐
- A. Nearest Common Ancestors
A. Nearest Common Ancestors Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 10000KB 64-bi ...
- nginx的详解（四）
10.nginx的访问控制及DDOS预防1)访问控制配置基于各种原因,Ningx有时要进行访问控制.比如说,一般网站的后台都不能让外部访问,所以要添加 IP 限制,通常只允许公司的IP访问.访问控制就 ...
- arc和mrc混用
arc项目中引用非arc代码 加上“-fno-objc-arc” 非arc项目中引用arc代码 加上“-fobjc-arc”
- 2013 Asia acm Hangzhou Regional Contest 杭州现场赛
B Stealing Harry Potter's Precious 题目大意:给定一个n*m的地图,某些点可以走,某些点可以走某些点不可以走,给定一个起点,又给出了k个点k<=4,要求从起点 ...
- rest-assured 将log()中的信息打印到log日志中去的方法
rest-assured 将log()中的信息打印到log日志中去的方法: ============方法1============== PrintStream fileOutPutStream = n ...
- MongoDB_单机版环境搭建
linux上安装MogoDB http://www.runoob.com/mongodb/mongodb-linux-install.html 在https://www.mongodb.com/dow ...
- [MFC] CFile读写文件实现(高效)
1.文件写入 void CMFCApplication1Dlg::Write() { CFile file; CString FileName = "D:\\100w.txt"; ...
- 标准C程序设计七---27
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- CF 2018 Battle of Brains GYM 102062 F
https://codeforces.com/gym/102062/attachments/download/8213/2018-battle-of-brains-en.pdf https://cod ...
- Idea其他设置
一.生成javadoc Tools->Gerenate JavaDoc 1. 选择是整个项目还是模块还是单个文件 2. 文档输出路径 3. Locale 选择地区,这个决定了文档的语言,中文就是 ...