【html5每日练习】绘制两个重叠矩形（带滤镜效果）

最新推荐文章于 2025-08-13 13:05:37 发布

原创最新推荐文章于 2025-08-13 13:05:37 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

html5 canvas 专栏收录该内容

17 篇文章

订阅专栏

本文展示了如何使用HTML的canvas元素和JavaScript绘制简单的矩形，并应用不同的颜色填充。

代码很简单，稍微会点canvas的应该就可以看懂

<html lang="en-US">
<canvas id=myCanvas width=500px height=400px></canvas>

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");

	context.fillStyle = "red";
	context.fillRect(50,50,100,100);
	context.fillStyle = "rgba(0,0,255,0.4)";
	context.fillRect(80,80,100,100);
	context.fill();
</script>
</html>