html5 Canvas

浏览数：26 / 时间：2015年06月09日

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);
返回的是GetContenxt对象

 

二：绘图方法

    ①：beginpath:开始路径绘画

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

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

    ④：LineWidth 设置线宽

    ⑤：StrokeStyle 设置线的颜色

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style java html 使用 方法 log ha si class style java html 使用 方法 log ha si

相关文章

随机文章

您可能还喜欢

您可能还喜欢