html5 Canvas

1：简介:Canvas用于在网页上生成图像，并可以用javascript操作图像

2：创建Canvas元素

    <canvas id="Canvas" style="200px;height:400px">
        您的浏览器暂时不支持Canvas！
    </canvas>

创建一个宽200，高400的画布，如果浏览器不支持Canvas元素，提示 您的浏览器不支持Canvas！

3：Javascript操作Canvas元素

一：context对象：每一个Canvas都有一个context对象（上下文对象），Canvas API定义在这个context对象上面，所以需要获取这个对象，方法是使用getContext方法。

Context语法：canvas . getContext(contextId)

getContext返回一个指定contextId的上下文对象，如果指定的ID不被支持，或者不存在则返回null，目前contextId只支持2d

        <script type="text/javascript">
            var Canvas = document.getElementById("Canvas");
            var GetContenxt = Canvas.getContext("3d");
            console.log(GetContenxt);
    </script>

GetContenxt 的值为null。

   var Canvas = document.getElementById("Canvas");
            var GetContenxt = Canvas.getContext("2d");
            console.log(GetContenxt);

返回的是GetContenxt对象

二：绘图方法

    ①：beginpath:开始路径绘画

    ②：moveTo(10,30)设置坐标起点，10,20

    ③：LineTo（100,30）绘制一条100到30的直线

    ④：LineWidth 设置线宽

    ⑤：StrokeStyle 设置线的颜色

    ⑥：stroke 进行线的着色，这时候整条线都可见