<canvas>设置宽高遇到的问题
在使用<canvas>元素时必须设置宽度和高度，指定可以绘画的区域大小。但是这里设置宽度和高度的时候有一个小问题。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>canvas绘图</title> </head>
<body>
<canvas id="drawimg" width="300" height="500">A drawimg of something.</canvas> </body>
<script>
var drawimg=document.getElementById("drawimg");
if(drawimg.getContext){
var context=drawimg.getContext("2d");
context.strokeRect(0, 0, 50, 50);
context.fillRect(51, 0, 50, 50);
}
</script>
</html>
在这里我直接在<canvas>标签内设置了绘画区域的大小。在浏览器中显示的效果是这样的
现在我不在标签内设置宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>canvas绘图</title>
<style type="text/css">
#drawimg{
width: 300px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="drawimg" >A drawimg of something.</canvas> </body>
<script>
var drawimg=document.getElementById("drawimg");
if(drawimg.getContext){
var context=drawimg.getContext("2d");
context.strokeRect(0, 0, 50, 50);
context.fillRect(51, 0, 50, 50);
}
</script>
</html>
这时浏览器中显示的效果就成了这样
结果，原本是宽高一样矩形，高度明显拉长了。这是为什么呢？
其实<canvas>有自己的默认宽高300px*150px，而且在<canvas>中定义width、height跟在style中定义width和height是有所区别的，<canvas>标签的width和height是绘画区域实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是<canvas>在浏览器中被渲染的高度和宽度。如果<canvas>的width和height没指定或值不正确，就被设置成默认值{width:300px，height:150px}。
这就解释了为什么第二种写法导致图形被拉伸，绘画区域的大小没有在<canvas>中定义，所以设置成立默认的{width:300px，height:150px}，而<style>中设置为{width:300px;height:500px;}将绘画区域的高度拉伸了。
<canvas>设置宽高遇到的问题的更多相关文章
- 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考
起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...
- 第4天：JS入门-给div设置宽高背景色
今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...
- 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?
此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...
- a标签什么时候可以设置宽高
行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高:而当设置了绝对定位或者浮动,会生成块框(即变成块元素),所以就可以设置宽高了
- html canvas 的宽高以及像素限制
canvas 宽高设置不合适的话,是画不出东西出来的 https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-elem ...
- frame方式布局一段文子，设置宽高
计算一段文字的宽高 /** * 计算一段文字的宽高 * * @param size 这段文字的最大宽高 * @param options NSStringDrawingUsesLineFragment ...
- android下载网络图片，设置宽高，等比缩放
使用Picasso组件去下载图片会发现图片宽高会变形不受等比缩放控制,即使设置了图片的 scaleType,可能是对Picasso的api没有用对, Picasso.with(this.activit ...
- table-cell设置宽高、居中
table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { co ...
- java压缩图片设置宽高
package html2pdf_2; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; ...
随机推荐
- UVALive 4728 Squares （平面最远点对）
题意:n个平行于坐标轴的正方形,求出最远点对的平方 题解:首先求出凸包,可以证明最远点对一定是凸包上的点对,接着可以证明最远点对(每个点的对踵点)一定只有3*n/2对 接着使用旋转卡壳找到最远点对,但 ...
- 【CentOS】LAMP相关4
MySQL不支持TAB补全.mysql_history命令历史 用SOCKET形式登陆:mysql -uroot -p123456,mysql -uroot -p123456 -S /var/lib/ ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- iOS UIColor RGB HEX
+(UIColor *)colorWithR:(CGFloat)r g:(CGFloat)g b:(CGFloat)b a:(CGFloat)a{ return [UIColor colorWithR ...
- js转盘抽奖
这个是很简易的转盘,只用了html,css,js 通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度.再添加一个背景图片类似于奖项的转盘 <!DOCTY ...
- SpringMvc的简单介绍
1.mcv框架要做哪些事情 (a)将url映射到java类或者Java类的方法 (b)封装用户提交的数据 (c)处理请求---调用相关的业务处理,封装响应的数据 (d)将封装的数据进行渲染,jsp,h ...
- 做 Web 开发少不了这些的
抱歉,似乎有些标题党了.最近做服务器的热备,整理了些李纳斯工具的适用方法.看看还有不错的. 基本命令 sleep 500 暂停 ctrl + z 暂停 progress & 后台运行 jobs ...
- windows 10 开始菜单和cortana无法工作的问题
过了个周末,到了实验室一开机发现报了个关键错误:开始菜单和cortana无法工作. 经过一番google ,发现问题,原来是360禁用了一个服务导致,这个服务是UserManager. 我直接去开启发 ...
- 20161023 NOIP 模拟赛 T2 解题报告
Task 2.回文串计数 (calc.pas/calc.c/calc.cpp) [题目描述] 虽然是一名理科生,Mcx常常声称自己是一名真正的文科生.不知为何,他对于背诵总有一种莫名的热爱,这也促使他 ...
- bzoj1024搜索
进度1/10mark(感觉完不成了) 事实上我刚看到题目一下子慌了,,,我在想怎么二分一块的长宽,然后验证 然而极其难写 于是想有没有暴力,举一些例子模拟一下 然后发现切割是有很明显的限制的:每次切割 ...