HTML5的canvas元素

最新推荐文章于 2026-01-02 22:14:08 发布

原创最新推荐文章于 2026-01-02 22:14:08 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

WEB前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素进行基本图形绘制，包括设置画布、绘制矩形并填充颜色等操作。

[size=medium][b]一.概述[/b][/size]
[size=small]
使用HTML5的canvas元素，我们可以在页面上绘制自己想要的图形，有点客户端编程时绘制图形的味道，比如C++的MFC中经常在屏幕上绘制图形。这个元素之前没有研究过，今天写了一段测试代码如下。
[/size]
[size=medium][b]二.代码[/b][/size]


<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");

	cxt.moveTo(10,10);
	cxt.lineTo(150,10);
	cxt.lineTo(150,50);
	cxt.lineTo(10, 50);
	cxt.lineTo(10, 10);

	cxt.fillStyle = "#f88";		
	cxt.fill();
	cxt.stroke();
</script>
</body>
</html>