在使用<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>设置宽高遇到的问题的更多相关文章

  1. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

  2. 第4天：JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

  3. 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

    此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...

  4. a标签什么时候可以设置宽高

    行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高:而当设置了绝对定位或者浮动,会生成块框(即变成块元素),所以就可以设置宽高了

  5. html canvas 的宽高以及像素限制

    canvas 宽高设置不合适的话,是画不出东西出来的 https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-elem ...

  6. frame方式布局一段文子，设置宽高

    计算一段文字的宽高 /** * 计算一段文字的宽高 * * @param size 这段文字的最大宽高 * @param options NSStringDrawingUsesLineFragment ...

  7. android下载网络图片，设置宽高，等比缩放

    使用Picasso组件去下载图片会发现图片宽高会变形不受等比缩放控制,即使设置了图片的 scaleType,可能是对Picasso的api没有用对, Picasso.with(this.activit ...

  8. table-cell设置宽高、居中

    table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { co ...

  9. java压缩图片设置宽高

    package html2pdf_2; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; ...

随机推荐

  1. FFmpeg纯净版解码 av_parser_parse2

    主要是通过av_parser_parse2拿到AVPaket数据,跟av_read_frame类似. 输入必须是只包含视频编码数据“裸流”(例如H.264.HEVC码流文件),而不能是包含封装格式的媒 ...

  2. FragmentActivity_左右滑动的碎片

    test1.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  3. RQNOJ 490 环形石子合并

    题目链接:https://www.rqnoj.cn/problem/490 题目描述 在一个园形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一 ...

  4. 现场打印智能无线PDA安卓POS 条码识别、打印、数据采集销售开单收银管理软件

    现场打印安卓POS 条码识别.打印.数据采集管理软件 案例: 经营日化品牌,从事小型超市和日用品商店的批发配送业务. 公司以前的销售模式:三个业务员负责跑市场,每个人负责一个区域,平均每天每个人要去到 ...

  5. 【Linux】Linux统计文件夹、文件数量的命令

    # 查看当前目录下的文件数量(不包含子目录中的文件) ls -l|grep "^-"| wc -l # 查看当前目录下的文件数量(包含子目录中的文件) 注意:R,代表子目录 ls ...

  6. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  7. CentOS 6.5 Nginx 配置

    1.安装所有 http功能: ./configure --user=www-data --group=www-data --with-http_ssl_module --with-http_reali ...

  8. 再记录一下如何配置oracle instantclient

    这问题遇到很多次,每次重装系统就遇到一次,却总是搞半天才搞定. 今天再次花费几个小时解决,终于有一个清晰的认识必须记录一下. 一.下载解压,不建任何目录,直接复制tnsname.ora过来.(当然也可 ...

  9. 紫書_例5-10 UVa207

    細節較多,自己寫的第一份半殘品,未能AC,后參考了劉老師的代碼,寫出了第二份的代碼,經過多次修改后總算AC,然而後果也很嚴重,導致代碼和劉老師極其相似,這也是我不喜歡看了參考代碼后再自己寫的緣故. 祇 ...

  10. java并发编程（五）正确使用volatile

    转载请注明出处:     volatile用处说明     在JDK1.2之前,Java的内存模型实现总是从主存(即共享内存)读取变量,是不需要进行特别的注意的.而随着JVM的成熟和优化,现在在多线程 ...