转自：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. sublime+LatexTools引用参考文献

        在用sublime+LatexTools一段时间之后,发现用它来写Latex真的是非常方便,配置好TexLive之后直接CTRL+B就可以直接编译运行了,so cool!但是最近写课程论文的时 ...

  2. c++ 满足条件拷贝，容器扩容（copy_if）

    #include <iostream> // cout #include <algorithm> // copy_if, distance #include <vecto ...

  3. Jmeter 4.0 扩展插件

    今天发现Jmeter4.0 也可以安装插件 而且比之前的版本的安装方法更为容易 https://jmeter-plugins.org/ https://jmeter-plugins.org/insta ...

  4. Mysql tinyint长度为1时在java中被转化成boolean型

    MySql 中的tinyint(1)的使用 在MySql中如何定义像Java中类型的Boolean类型数据..其实,mysql中 是没有直接定义成Boolean这种数据类型. 它只能定义成 tinyi ...

  5. 音视频学习系列第（七）篇---MediaCodec的使用

    音视频系列 什么是MediaCodec MediaCodec是安卓官方提供的一套用于音视频编码和解码的API,该API是在安卓4.1(API 16)引入的,因此只能用于4.1以上的手机 MediaCo ...

  6. freemarker中对null值问题的处理

    1. freemarker不支持null. 如果值为null会报错. 2.当值为null的处理 1)过滤不显示 Hello ${name!} 在属性后面加感叹号即可过滤null和空字符串 if和”?? ...

  7. [.NET开发] C#编程调用Cards.dll实现图形化发牌功能示例

    本文实例讲述了C#编程调用Cards.dll实现图形化发牌功能.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; usi ...

  8. Python 运算符重载

    https://www.cnblogs.com/hotbaby/p/4913363.html

  9. win10 WiFi 密码查询 命令

    如果你笔记本有WiFi,正好你系统又是Win10 那么... netsh wlan show profile * key=clear

  10. docker添加国内仓库安装iredmail

    centos 7: 1.yum install docker or yum update docker sudo tee /etc/docker/daemon.json <<-'EOF'{ ...