<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; ...

随机推荐

Nginx - Windows下作为服务启动
Nginx官方没有提供作为服务启动nginx的方案.以服务启动nginx依赖于winsw,当前最新版是1.19. 参考:https://segmentfault.com/a/1190000006807 ...
随便写一下看下效果。一个js问题
(function(a){ console.log(a); var a = 10; function a(){} }(100)); 问:执行这段代码会输出什么.
Shader 简明入门教程
Unity3D的所有渲染工作都离不开着色器(Shader),如果你和我一样最近开始对Shader编程比较感兴趣的话,可能你和我有着同样的困惑:如何开始?Unity3D提供了一些Shader的手册和文档 ...
Javascript添加事件的addEventListener()及attachEvent()区别分析，事件委托
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
Diablo2 1.13版&PlugY10.00 男巫存档
下载地址: http://files.cnblogs.com/files/xiandedanteng/20160805D2113NanwuL83Backup.rar 解压后文件放到Diablo2游戏的 ...
【WPF】ContentControl Style定义与使用出现问题后 -- 引发的思考
一.背景使用WPF的朋友,大家都很喜欢采用定义控件的公共样式,以便整个框架对该资源的使用,好处就是可以达到代码复用.系统风格统一等: 1. 定义资源 <Style TargetT ...
Oracle序列简单应用
/* --指定cache的值如果指定CACHE值 oracle就可以预先在内存里面放置一些sequence 这样存取会快些 cache里面的取完 oracle自动再取一组到 cache 使用ca ...
Dict和Set类型
花括号{}表示这是一个dict,用于类似给定一个名字,就可以直接查找分数,d={} 由于dict也是集合,len()函数可以计算任何集合的大小使用dict本身提供的get方法,当Key不存在时, ...
Android SQLite 数据库增删改查操作
Android SQLite 数据库增删改查操作转载▼ 一.使用嵌入式关系型SQLite数据库存储数据在Android平台上,集成了一个嵌入式关系型数据库--SQLite,SQLite3支持NU ...
python之并发编程
一背景知识顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所 ...