转自：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. Codeforces Round #305 (Div. 2) D. Mike and Feet 单调栈

    D. Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  2. python 集合交补

    setx = set(["apple", "mango"]) sety = set(["mango", "orange" ...

  3. Lua面向对象 --- 单例

    GameManager.lua: --单例模式是利用一个全局表来实现的 GameManager = {} Manager = {__index = GameManager} function Game ...

  4. OpenGL入门程序二：绘制简单的圆

    学习 绘制一个圆: ; const float Pi = 3.1415926536f; const float R = 0.5f; //绘制一个圆 void DrawCircle() { //绘制一个 ...

  5. C# 通过Newtonsoft.Json.dll序列化日期的处理

    Newtonsoft.Json.dll提供了非常好的Json序列化和反序列化方式,但是对日期的处理却让我纠结了很久.首先定义类如下: public class Student{ public int ...

  6. ps命令各个内容信息详解

        USER    用户名  PID    进程ID(Process ID)  %CPU    进程的cpu占用率  %MEM    进程的内存占用率  VSZ    进程所使用的虚存的大小(Vi ...

  7. python 小练习12

    给你一个整数数列a1,a2,a3,...,an,请你修改(不能删除,只能修改)最少的数字,使得数列严格单调递增. 数列存储在列表L中,你可以直接使用L,L的长度小于100000. 注意:必须保证修改后 ...

  8. 通过SVN获取变更列表，得到对应的最新class

    通过本地SVN获得未提交的文件列表获取工程中最新的class的方式参考: 增量部署代码利用批处理命令按原始结构复制指定的文件 新写了一个增强版,根据已提交至SVN的代码loglist,获取最新的cla ...

  9. spring--mvc用戶注册用户名验重

    spring--mvc用戶注册用户名验重 注册是验证用户名是否重复.post方法,当表单的用户名文本框失去焦点时,由ajax方法指定,进行@RequestMapping指定的url提交时调用的方法. ...

  10. 有名管道mkfifo

    int mkfifo(const char *pathname, mode_t mode); int mknod(const char *pathname, mode_t mode, dev_t de ...