<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; ...
随机推荐
- python 处理视频输入输出
视频的处理和图片的处理类似,只不过视频处理需要连续处理一系列图片. 一般有两种视频源,一种是直接从硬盘加载视频,另一种是获取摄像头视频. 0x00. 本地读取视频 核心函数: cv.CaptureFr ...
- java 随机生成身份证代码
import java.util.Calendar; import java.util.Collection; import java.util.HashMap; import java.util.I ...
- ACM： ICPC/CCPC Sudoku DFS - 数独
Sudoku Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/65535K (Java/Other) Total Submis ...
- [ACM训练] 算法初级 之 搜索算法 之 深度优先算法DFS (POJ 2251+2488+3083+3009+1321)
对于深度优先算法,第一个直观的想法是只要是要求输出最短情况的详细步骤的题目基本上都要使用深度优先来解决.比较常见的题目类型比如寻路等,可以结合相关的经典算法进行分析. 常用步骤: 第一道题目:Dung ...
- Curator leader 选举(一)
要想使用Leader选举功能,需要添加recipes包,可以在maven中添加如下依赖: <dependency> <groupId>org.apache.curator< ...
- 2016 正确 sublime安装PHPcs PHPcodesniffer代码规范提示插件，修正网上部分不详细描述
对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香!-------------------14:37 2016/3/212016 正确 sublime安装PHPcs PHPcodesniff ...
- 【DFS】POJ 1321
POJ 1321 棋盘问题 题意:中文题不解释. 思路:经典DP,比较取巧的想法是一行行(按照题目意思一行最多只能放一个)来看,标记一列列.注意考虑到有些行可能不放的情况. /** Sample In ...
- 自动ftp上传文件脚本
方法一: echo "open 21.244.88.129 user glxtftp glbzuser bin prompt off cd /glxt/DBINFO lcd /tmp put ...
- yum 只下载不安装
以下载busybox为例 1.首先确定有yumdownloader 这个软件,这个软件在yum-utils 工具包里面. # rpm -qa |grep yum-utils # yum -y inst ...
- css解决display:inline-block;产生的缝隙（间隙）
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是 ...