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

最新推荐文章于 2025-01-21 15:03:36 发布

boia

最新推荐文章于 2025-01-21 15:03:36 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 canvas 文章标签： html5 html

本文链接：https://blog.youkuaiyun.com/boiaprogramfan0420/article/details/7450848

html5 canvas 专栏收录该内容

17 篇文章

订阅专栏

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

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

代码很简单，稍微会点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>