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:在排序 ...
随机推荐
- mysql无法创建外键问题
在阿里云上面安装配置了Mysql后,无法创建外键, 原因及解决方法: 选择InnoDB引擎,因为MyISAM引擎不支持外键,默默地说一句,MySQL真神奇
- .NET重构（一）：抽象工厂模式实现登录
导读:一路艰辛,我也走到了重构.在重构之前,师傅让用经典三层(UI.BLL.DAL)敲了登录.用户的增删改查,共五条线.从开始对三层的朦胧,到五条线结束,终于对三层有了逻辑上清晰的理解.然后就画了几天 ...
- 异常System.Threading.Thread.AbortInternal
异常信息: System.Threading.ThreadAbortException: 正在中止线程. 在 System.Threading.Thread.AbortInternal() 在 Sys ...
- SPOJ-Matrices with XOR property,暴力打表！
Matrices with XOR property 应该先去看看这题的,补题的时候发现这题其实挺简单的.. 题意:n*m的格子用1-n*m的数去填,要求如果一个格子(i1,j1)与另外一个格子(i2 ...
- BZOJ 3240 [Noi2013]矩阵游戏 ——费马小定理 快速幂
发现是一个快速幂,然而过不去. 怎么办呢? 1.十进制快速幂,可以用来练习卡时. 2.费马小定理,如果需要乘方的地方,可以先%(p-1)再计算,其他地方需要%p,所以需要保存两个数. 然后就是分类讨论 ...
- [BZOJ4506] [Usaco2016 Jan]Fort Moo（DP？）
传送门 总之可以先预处理出来每个位置最多往上延伸多少 枚举两行,看看夹在这两行中间的列最大能构成多大的矩形 可以看出,必须得在一个两行都没有X的区间才有可能构成最大的答案 那么可以把这些区间处理出来, ...
- cf487C Prefix Product Sequence
Consider a sequence [a1, a2, ... , an]. Define its prefix product sequence . Now given n, find a per ...
- PatentTips - GPU Support for Blending
Graphics processing units (GPUs) are specialized hardware units used to render 2-dimensional (2-D) a ...
- Day 3 网络基础
网络基础 一.什么是互联网协议及为何要有互联网协议 ? 互联网协议:指的就是一系列统一的标准,这些标准称之为互联网协议.互联网的本质就是一系列的协议,总称为‘互联网协议’(Internet Proto ...
- elasticsearch入门使用（三） Query DSL
Elasticsearch Reference [6.2] » Query DSL 参考官方文档 :https://www.elastic.co/guide/en/elasticsearch/refe ...