您好!欢迎来到静学网! 注册 登入
  • 致力提供中国优质教程及自媒体资讯,打造中国品牌教育先锋。

最详细的<canvas> 标签的属性及用法讲解

课程目录 卢育永 次浏览
<canvas> 标签本身是没有什么作用的,但是结合其他属性对象,特别利用js进行控制,能就别具一格了,当前所有主流的浏览器都是支持<canvas> 标签的,因此利用价值还是不错的,canvas只是为了客户矢量图形而设计的, 本身没有具体使用方向,但值得庆幸的是能用js脚本进行绘制,能够在这个标签上显示。这个标签的定义是图形,它只是一个容器,一个图形容器,必须用其他语言控制。当然这个标签实际上在DOM对象中还是比较复杂的,其方法还是比较多的。其一般属性有height和width。
 
代码示例:

<!DOCTYPE html>
<html>
<head>
<title>Throw-Try-Catch</title>
</head>
<body >
<canvas id="myCanvas" style="height: 200px; width: 200px; border:1px solid #00e">练习CANVAS</canvas>
 
 <hr>
 <!--js部分-->
 <script type="text/javascript">
  var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext("2d");//这是一个当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
    
    ctx.fillStyle ='#000091';//图形颜色
 
    ctx.fillRect(0,0,200,200);//rect(左边距,上边距,矩形长,矩形宽)
 
 </script>
 
</body>
</html>

 canvas标签
 
当然canvas标签属性及方法是非常多的,有时间可给大家一一讲解,更多问题请咨询。



静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明最详细的<canvas> 标签的属性及用法讲解
顶一下
(0)
踩一下
(0)
畅所欲言
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论
友情链接:
自学网
本网站所刊载信息,不代表静学网观点。 刊用本网站稿件,务经书面授权或注明来源。 未经授权禁止转载、摘编、复制及建立镜像,违者将依法追究法律责任。 投稿邮箱:1870447831@qq.com | 举报邮箱:1870447831@qq.com