html中对于fillstyle示例

最新推荐文章于 2025-05-09 06:10:00 发布

傲世阿龍

最新推荐文章于 2025-05-09 06:10:00 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/u010383937/article/details/72762967

HTML 专栏收录该内容

115 篇文章

订阅专栏

本文介绍了一个简单的HTML5 Canvas示例，利用JavaScript动态生成由不同RGB颜色组成的渐变矩形网格。通过调整红绿蓝三文鱼的数值，可以创建从亮到暗的色彩过渡效果。

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>fillstyle</title>
<script>
function draw(id)
{
	var canvas = document.getElementById(id);
	var context = canvas.getContext('2d');
	for(var i=0;i<6;i++)
	{
		for(var j=0;j<6;j++)
		{
			context.fillStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
			context.fillRect(j*25,i*25,25,25);
		}
	}
}
</script>
</head>
<body onload="draw('canvas');">
<h1>fillstyle</h1>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>