HTML5中的Canvas元素

最新推荐文章于 2023-05-17 17:05:59 发布

原创最新推荐文章于 2023-05-17 17:05:59 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas #图形

GIS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍HTML5中新增的Canvas元素，并演示如何利用JavaScript进行绘图操作。通过一个简单的示例，展示了如何设置Canvas的基本属性并使用脚本绘制矩形。

<canvas>是HTML5种新加入的元素。它用于图形的控制和其他图像，通过脚本（通常是JavaScript来完成）。

注意它只是图形的容器，我们必须使用脚本来绘制图形。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>