转自：http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者：Artwl

背景

　　今天在博问中看到一个问题：用canvas 的 lineto方法画对角线，但画出来的图形不对？

　　这是一个很常见的误区，这里给大家细说一下。

原理

　　在w3网站上是这样解释的：

The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.

　　其实这里已经说的很明白，通俗点说就是在canvas中定义width、height跟在style中定义width和height是不同的，canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值(width:300px，height:150px)。

　　我们可以利用style的width和height来缩放canvas，请看下面的示例。

示例

　　示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
            function drawDiagonal(id){
                var canvas=document.getElementById(id);
                var context=canvas.getContext("2d");
                context.beginPath();
                context.moveTo(0,0);
                context.lineTo(100,100);
                context.stroke();
            }

            window.onload=function(){
                drawDiagonal("diagonal1");
                drawDiagonal("diagonal2");
                drawDiagonal("diagonal3");
            }
    </script>
</head>
<body>
    <canvas id="diagonal1" style="border:1px solid;" width="100px" height="100px"></canvas>
    <canvas id="diagonal2" style="border:1px solid;width:200px;height:200px;" width="100px" height="100px"></canvas>
    <canvas id="diagonal3" style="border:1px solid;width:200px;height:200px;"></canvas>
</body>
</html>
 

转：Canvas标签的width和height以及style.width和style.height的区别的更多相关文章

  1. 在canvas标签和style中定义width和height

    在canvas标签中定义width.height跟在style中定义width.height是不同的.canvas标签的width和height是画布实际宽度和高度,就是在这个上面绘制图形.style ...

  2. canvas基础入门（一）canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  3. canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球

    从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...

  4. html5 canvas标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  6. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  7. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  8. canvas标签的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. HTML5的canvas标签制作黑客帝国里的简单画面

    1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...

随机推荐

  1. lncRNA研究利器之"TANRIC"

    http://bioinformatics.mdanderson.org/main/Main_Page http://ibl.mdanderson.org/tanric/_design/basic/i ...

  2. Kali Linux下常用软件安装及配置

    0x00 Synaptic Synaptic(新立得)是一个高级软件包管理器,它可以管理系统内安装的每个软件及包组件,在图形界面内完成LINUX系统软件的搜寻.安装和删除. Synaptic安装简单, ...

  3. Xcode集成POD教程

    http://www.cocoachina.com/ios/20150410/11526.html COCOAPODS的网站上有很多非常好用的资源,这里来说一下如何把POD集成到我们的Xcode项目中 ...

  4. git/ssh备查文档

    配置多个ssh key: 待更新 git速查表: git remote set-url origin(远程仓库名称) https://xxxxx/ProjectName.git  从ssh切换至htt ...

  5. Java 常用对象-StringBuffer类

    2017-11-02 20:57:02 StringBuffer:线程安全的可变字符序列.一个类似于 String 的字符串缓冲区,但不能修改.虽然在任意时间点上它都包含某种特定的字符序列,但通过某些 ...

  6. C#中使用Log4记录日志

    具体步骤如下: 从网上下载log4net对应.net版本的dll 在C#项目中引用该dll 创建log4net对应的配置文件 在程序中使用 log4net的配置文件如下: <?xml versi ...

  7. [.NET开发] C#面向服务WebService从入门到精通

    C#面向服务WebService从入门到精通>包含以下两个部分: 一.<C#远程调用技术WebService修炼手册[基础篇]> 本次分享课您将学习到以下干货知识点: 1).WebS ...

  8. mRNA基本概念

    mRNA是由DNA的一条链转录而来的(可以是正链,也可以是反链),DNA是由非编码区和编码区组成,编码区也有其特殊的结构,主要有外显子和内含子组成. mRNA的一个重要性质就是可变剪切,也就是同一个编 ...

  9. 新概念 Lesson 2 Sorry, sir.

    Is this your handbag? 这是你的手提包吗? Yes,it is. /No it isn't 人称代词的主格宾格 形容性物主代词的用法 Does the man get his um ...

  10. ZOJ-3329 One Person Game （有环期望问题）

    题目大意:有3个骰子,各有k1,k2,k3个面,面值为1~ki.还有一个计数器,初始值为0,统计所有的面值和.每次同时置这三个骰子,如果第一个骰子的朝上的值为a.第二个值为b.第三个值为c,那么将计数 ...