Html5学习

canvas元素的实际尺寸（宽度，高度）是由标签上的属性width和height来决定的。

这两个属性不设置时默认值为：宽度=300px，高度=150px。

如果在样式表里设置width和height，则表示在实际宽度和高度的基础上进行缩放，缩放后的尺寸为样式里设置的width和height。

示例代码：

<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title>canvas</title>  <style type="text/css">    #diagonal {      border:1px solid #000; width:200px; height:400px;    }  </style></head><body>  <canvas id="diagonal" width="200" height="200"></canvas>  <script type="text/javascript">    function drawDiagonal() {      var canvas = document.getElementById("diagonal");      var context = canvas.getContext("2d");      context.beginPath();      context.moveTo(100,50);      context.lineTo(0, 150);      context.moveTo(0, 50);      context.lineTo(100, 150);      context.stroke();    }    window.addEventListener("load", drawDiagonal, true);  </script></body></html>

上述代码根据属性中设置的值<width="200" height="200">生成一个200*200的元素，