2. 杂记

Canvas绘制矩形rect工具

zhuanbike 2022-1-29 765

直接上带注释的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas矩形</title>
	</head>
	<body>
		<canvas id="canvas1" width="600" height="600">
			您的浏览器不支持canvas
		</canvas>
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var ctx = canvas1.getContext("2d")
			console.log(ctx)//输出我们能用哪些2d绘画属性
			ctx.rect(50,50,300,300) //rect自带矩形，50，50坐标 300是宽、高
			ctx.fillStyle="antiquewhite" //填充颜色
			ctx.fill() //填充
			//设置描边颜色
			ctx.strokeStyle="aqua"
			//设置描边属性,描边的宽度
			ctx.lineWidth=10
			//渲染路径，描边
			ctx.stroke()
		</script>
	</body>
</html>


最新回复 (0)
发新帖