01-html Canvas标签的使用案例

最新推荐文章于 2024-10-29 21:34:31 发布

原创最新推荐文章于 2024-10-29 21:34:31 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

Html5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas标签在页面中绘制一个矩形，并将其填充颜色设置为红色，同时展示了绘制直线和圆的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面中绘制一个矩形，并将其填充的颜色设置为红色。

<!--告诉浏览器这是一个Html5的文档-->
<!DOCTYPE html>
<html>
<head>
<!--网页的编码方式-->
<meta charset="UTF-8"/>
</head>
<body>
<!--定义一个画布标签，在画布标签中绘制图形-->
<canvas id="can1" width="500px;" height="500px;" style="border: 1px solid red"></canvas>
<script type="text/javascript">
	//得到画布
	var can=document.getElementById("can1");
	//得到上下文即画笔
	var cxt=can.getContext("2d");
	//矩形的填充的颜色为红色
	cxt.fillStyle="#FF0000";
	//填充矩形（x,y,w,h）
	cxt.fillRect(100,100,300,300);
	//绘制直线
	cxt.moveTo(10,10);
	cxt.lineTo(150,50);
	cxt.lineTo(10,50);
	cxt.stroke();
	//绘制圆
	cxt.fillStyle="#FF0000";
	cxt.beginPath();
	cxt.arc(70,18,15,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
</script>
</body>
</head>
</html>