转自：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. python tcp

    server import socket host="localhost" port= s=socket.socket(socket.AF_INET,socket.SOCK_STR ...

  2. django查询操作

    查询操作是Django的ORM框架中最重要的内容之一.我们建立模型.保存数据为的就是在需要的时候可以查询得到数据.Django自动为所有的模型提供了一套完善.方便.高效的API,一些重要的,我们要背下 ...

  3. angular5补漏知识点

    1.属性行指令 attr.** 2.ngfor循环优化 trackBy func 3.aot编译 4.tree shaking 5.脏检测方法 6.管道的 pure和impure 7.asyncpip ...

  4. LeetCode--190--颠倒二进制位

    问题描述: 颠倒给定的 32 位无符号整数的二进制位. 示例: 输入: 43261596 输出: 964176192 解释: 43261596 的二进制表示形式为 000000101001010000 ...

  5. Blog Post Rating CodeForces - 806E (线段树二分)

    题目链接 题目大意: 有一个博客, 初始分数为$0$, 有$n$个人, 第$i$个人有一个期望值$a_i$, 如果第$i$个人浏览博客时,博客赞数高于$a_i$博客分数$-1$, 低于$+1$, 相等 ...

  6. vs2015下通过opencv使用hdf5

    因为使用Kinect SDK编程,又需求高速文件I/O,所以通过opencv接口使用hdf5. (opencv 3.1以上版本,在其Extra Modules中支持hdf5) 一. 环境 OS: Wi ...

  7. thinkphp条件查询

    1.这是我在做项目的时候编写的: $profit = M('shipping_types',' ','DB_PROFIT');//没有表前缀,在M函数的第二个参数就为空. //条件$field = a ...

  8. 点击input文字会自动消失

    <input type="text" name="q" value="请输入关键字" style="width:128px; ...

  9. 常用OS获取信息命令

    一.linux#CPU信息(总核心数和型号) cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c #物理CPU数及每颗物理CPU中核心数(可能有 ...

  10. Centos7上部署openstack ocata配置详解

    之前写过一篇<openstack mitaka 配置详解>然而最近使用发现阿里不再提供m版本的源,所以最近又开始学习ocata版本,并进行总结,写下如下文档 OpenStack ocata ...