• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5通过调用canvas对象的getContext()方法来获取绘图环境
    我们用的最基本的绘图环境在canvas中绘图,通过调用canvas对象的getContext()方法来获取绘图环境。getContext()方法只需要一个参数:绘图环境的类型。在游戏中,我们使用2D类型的绘图环境。

    获取canvas绘图环境

    复制代码
    代码如下:

    <!--<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。-->
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset = utf-8">
    <title>HTML5</title>
    <script type="text/javascript" charset = "utf-8">
    //这个函数将在页面完全加载后调用
    function pageLoaded()
    {
    //获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同
    var canvas = document.getElementById('tCanvas');
    //获取该canvas的2D绘图环境
    var context = canvas.getContext('2d');
    //绘制代码将出现在这里
    }
    </script>
    </head>
    <body onload="pageLoaded();">
    <canvas width = "400" height = "200" id = "tCanvas" style = "border:black 1px solid;">
    <!--如果浏览器不支持则显示如下字体-->
    提示:你的浏览器不支持<canvas>标签
    </canvas>
    </body>
    </html>
    上一篇:HTML5在canvas中绘制复杂形状附效果截图
    下一篇:Html5新特性用canvas标签画多条直线附效果截图
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5通过调用canvas对象的getContext()方法来获取绘图环境 HTML5,通过,调用,canvas,对象,