html < canvas>图形容器标签

原创 PHP笔记  2017-05-11 21:26  阅读 1,196 views 次

在html中,<canvas>标签是用来定义图形;<canvas>标签只是图形的容器,还必须用脚本(一般是javascript脚本)来绘制图形;<canvas>标签是html新增标签。

属性

  • height:画布的高度。
  • width:画布的宽度。

<canvas>标签支持html全局属性和html事件属性

格式:

<canvas id="唯一id">浏览器不支持提示内容</canvas>

说明:<canvas>标签中的内容会在不支持<canvas>标签的浏览器中显示。

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html < canvas>图形容器标签_PHP笔记</title>
</head>
<body>
<canvas id="myCanvas">你的浏览器不支持< canvas>标签!</canvas>
<script>
var i=document.getElementById('myCanvas');
var c=i.getContext('2d');//指定了二维绘图
c.fillStyle='#8968CD';//填充绘画的颜色
c.fillRect(0,0,500,100);/*绘制“已填色”的矩形,宽500px,高100,左上角的坐标(0,0)*/
</script>
</body>
</html>
</html>

运行结果:

本文地址:https://www.ggbiji.com/html-canvas.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情