canvas绘制渐变的矩形

最新推荐文章于 2024-05-09 10:29:51 发布

Ron韦斯莱

最新推荐文章于 2024-05-09 10:29:51 发布

阅读量771

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/90576460

版权

效果展示：
在这里插入图片描述
代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>渐变矩形</title>
	<style>
		canvas {
			border: 1px dashed red;
		}	
	</style>
</head>
<body>
	<canvas width="600" height="400"></canvas>
	<script>
		//获取canvas元素
		var myCanvas = document.querySelector('canvas');
		//获取上下文
		var ctx = myCanvas.getContext('2d');
		//利用渐变来填充矩形
		var linear = ctx.createLinearGradient(100,100,500,100);
		//添加颜色段
		linear.addColorStop(0,'pink');
		linear.addColorStop(1,'blue');
		//改变描边的样式为渐变色
		ctx.strokeStyle = linear;
		//画一个100,100为起点，宽高400,100的描边矩形
		ctx.strokeRect(100,100,400,100);
		//改变填充的样式并绘画填充矩形
		ctx.fillStyle = linear;
		ctx.fillRect(100,100,400,100);
	</script>
</body>
</html>

Ron韦斯莱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制渐变的矩形

效果展示：代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>渐变矩形</title> <style> canvas { border: 1px dashed red; } </st...
复制链接

扫一扫