fillStroke画出多彩图形

最新推荐文章于 2024-01-27 16:20:11 发布

boia

最新推荐文章于 2024-01-27 16:20:11 发布

阅读量907

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 canvas 文章标签： border 图形

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

html5 canvas 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript在网页上创建一个动态彩色方格画布，通过循环遍历并填充不同颜色的方块，实现简单的图形绘制效果。

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

<!doctype html>
<html>
<canvas width=300px height=300px id="mycanvas" style="border:3px solid blue"></canvas>
<script>
	var mycanvas = document.getElementById("mycanvas");
	var context = mycanvas.getContext("2d");
	
	//context.fillStyle = "red";
	for(var i=0;i<6;i++)
	{
		for(var j=0;j<6;j++)
		{
			//context.beginPath();
			context.fillStyle = 'rgb('+Math.floor(255-42.5*j)+','+Math.floor(255-42.5*i)+',0)';
			//context.fillStyle = "red";
			context.fillRect(50*i,50*j,50,50);
			//context.strokeStyle = "green";
			//context.strokeRect(50*i,50*j,50,50);
		}
	}
</script>  
</html>

效果如下