canvas教程

HTML5通过挪用canvas工具的getContext()要领来获取画图情形

字号+ 作者:H5之家 来源:H5之家 2018-03-11 15:02 我要评论( )

通过挪用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>
<canvas width = "400" height = "200" id = "tCanvas" style = "border:black 1px solid;">
<!--假如赏识器不支持则表现如下字体-->
提醒:你的赏识器不支持<canvas>标签
</canvas>
</body>
</Html>
本文地址:
转载请注明出处。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas基本图形绘制

    canvas基本图形绘制

    2018-03-11 10:01

  • Canvas 继续学习

    Canvas 继续学习

    2018-03-11 09:08

  • canvas基础学习(1)

    canvas基础学习(1)

    2018-03-11 09:06

  • android canvas画图 切割画布(clipRect)

    android canvas画图 切割画布(clipRect)

    2018-03-10 18:05

网友点评