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:在排序 ...
随机推荐
- 【java基础 10】hash算法冲突解决方法
导读:今天看了java里面关于hashmap的相关源码(看了java6和java7),尤其是resize.transfer.put.get这几个方法,突然明白了,为什么我之前考数据结构死活考不过,就差 ...
- 【bzoj2597】[Wc2007]剪刀石头布 动态加边费用流
题目描述 在一些一对一游戏的比赛(如下棋.乒乓球和羽毛球的单打)中,我们经常会遇到A胜过B,B胜过C而C又胜过A的有趣情况,不妨形象的称之为剪刀石头布情况.有的时候,无聊的人们会津津乐道于统计有多少这 ...
- 12.jsp概述及指令
JSP全名是Java Server Page,它是建立在Servlet规范之上的动态网页开发技术.在JSP文件中,HTML代码与Java代码共同存在.Html代码用来实现网页中静态内容的显示,Java ...
- 算法复习——trie树（poj2001）
题目: 题目描述 给出 n 个单词(1<=n<=1000),求出每个单词的非公共前缀,如果没有,则输出自己. 输入格式 输入 N 个单词,每行一个,每个单词都是由 1-20 个小写字母构成 ...
- OpenJ_Bailian3375
Farmer John has decided to reward his cows for their hard work by taking them on a tour of the big c ...
- 云计算与 OpenStack
“云计算” 算是近年来最热的词了.现在 IT 行业见面不说这三个字您都不好意思跟人家打招呼. 对于云计算,学术界有各种定义,大家有兴趣可以百度一下. CloudMan 这里主要想从技术的角度谈谈对云计 ...
- POJ Blue Jeans [枚举+KMP]
传送门 F - Blue Jeans Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u ...
- R语言入门---杂记（一）---R的常用函数
1.nchar():查看字符串长度. 2.rev(): 给你的数据翻个个 3.sort():给你数据排个序(默认从小到大依次排列) 4.runif():产生均匀分布的随机数 #runif
- 计算机windows7连接打印机
计算机连接打印机 (1)查看打印机的名字. 示例,打印机名为 HP LaserJet M1522 .... (2)打开windows开始菜单,点击[设备和打印机],然后查看打印机和传真那个区域是否有打 ...
- jsp 时间格式
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %> <fmt:formatDate ...