html5 Canvas

标签：style   color   os   使用   java   ar   div   log   html   

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

2：创建Canvas元素

    <canvas id="Canvas" style="width: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);

二：绘图方法

    ①：beginpath:开始路径绘画

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

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

    ④：LineWidth 设置线宽

    ⑤：StrokeStyle 设置线的颜色

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

html5 Canvas

标签：style   color   os   使用   java   ar   div   log   html   

原文地址：http://www.cnblogs.com/lilihai/p/3950098.html