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:在排序 ...
随机推荐
- unittest跳过测试和预期失败
在运行测试时,有时需要直接跳过某些测试用例,或者当用例符合某个条件时跳过测试,又或者直接将测试用例设置为失败.unittest提供了这些需求的装饰器. unittest.skip(reason) 无条 ...
- 【LeetCode】Broken Calculator(坏了的计算器)
这道题是LeetCode里的第991道题. 题目描述: 在显示着数字的坏计算器上,我们可以执行以下两种操作: 双倍(Double):将显示屏上的数字乘 2: 递减(Decrement):将显示屏上的数 ...
- [uiautomator篇] 设置@test的执行顺序
http://jackyrong.iteye.com/blog/2025609 Brief Junit 4.11里增加了指定测试方法执行顺序的特性 测试类的执行顺序可通过对测试类添加注解 “@FixM ...
- 转自kuangbin的AC自动机（赛前最后一博）
有了KMP和Trie的基础,就可以学习神奇的AC自动机了.AC自动机其实就是在Trie树上实现KMP,可以完成多模式串的匹配. AC自动机 其实 就是创建了一个状态的转移图,思想很 ...
- 【bzoj2989】数列 KD-tree+旋转坐标系
题目描述 给定一个长度为n的正整数数列a[i]. 定义2个位置的graze值为两者位置差与数值差的和,即graze(x,y)=|x-y|+|a[x]-a[y]|. 2种操作(k都是正整数): 1.Mo ...
- P3146 [USACO16OPEN]248 (区间DP)
题目描述 给定一个1*n的地图,在里面玩2048,每次可以合并相邻两个(数值范围1-40),问最大能合出多少.注意合并后的数值并非加倍而是+1,例如2与2合并后的数值为3. 这道题的思路: 状态: ...
- springboot开发 第一个案例之hello，world！
开发环境:(1)Eclipse Java EE Version: Neon Release (4.6.0) Build id: 20160613-1800 (2)apache-maven-3 ...
- css解析规则
1.因为css对空格不敏感,因此在每个样式后都要加一个分号,不然会把写在后面的样式当成一个整体来解析,直到遇到分号为止. 2.当遇见不认识的属性或值时,将忽略这个属性,继续解析后面的属性. 3.对于复 ...
- elasticsearch起步
elasticsearch教程 elastic入门教程 阮一峰的elasticsearch教程 elasticsearch官网 kibana用户手册 elasticsearch安装步骤 参考:http ...
- 安卓解析XML文件
安卓解析XML文件 主要有三种方式:DOM解析.SAX解析.PULL解析 其中: DOM解析为等XMl文件全部加载后,然后根据需要解析的内容解析出所需的内容数据. SAX解析为从XML文件中执行一行, ...