Canvas的基础知识

Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图
形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。
语法格式：

<canvas></canvas>

注意，在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，用户可以自定义具体的大小或者设置canvas元素的其他特性。在页面中加入了canvas元素后，我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。

简单的例子：

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>canvas中的对角线示例</title>  
</head>  
<body>  
<canvas id="djx" style="border: 1px solid;"  width="200" height="200"> </canvas>
<script>
        function drawDiagonal() {
            // 取得canvas元素及其绘图的上下文
            var canvas = document.getElementById('djx');
            var context = canvas.getContext('2d');

            // 用绝对坐标来创建一条路径
            context.beginPath();
            context.moveTo(70, 140);
            context.lineTo(140, 70);

            // 将这条线绘制到canvas上
            context.stroke();
        }
        window.addEventListener("load", drawDiagonal, true);
  </script>
</body>  
</html>

效果如下：

猜你喜欢