HTML5画渐变背景图片，自动下载

最新推荐文章于 2022-06-04 15:57:33 发布

匠子心

最新推荐文章于 2022-06-04 15:57:33 发布

阅读量1.8k

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/wyc0991/article/details/14513193

版权

drawBgLine.html

<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>html5画渐变背景图片，并自动下载</title>
</head>

<body>
	<center>
		<canvas id="c" width="1" height="200" ></canvas>
	</center>
	<script>
		
		//第一步：获取canvas对象
		var c = document.getElementById("c");
		//第二步：获取canvas对象的上下文对象
		var context = c.getContext("2d");
		
		/*
		 * 这些是画其他图形代码
		context.beginPath();
		context.lineWidth=10;
		context.strokeStyle="red";
		context.moveTo(50,50);
		context.lineTo(150,50);
		context.stroke();
		context.closePath();
		
		//context.strokeRect(220,50,50,50);
		context.fillStyle="blue";
		context.fillRect(220,50,50,50);
		
		context.beginPath();
		context.arc(150,150,50,0*Math.PI/180,-180*Math.PI/180,false);
		context.lineTo(150,150);
		context.closePath();
		context.stroke();
		
		
		context.lineWidth=1;
		context.font="50px 宋体";
		context.fillText("briup",0,220);
		
		context.save();
		context.translate(50,50);
		context.rotate(90*Math.PI/180);
		
		context.beginPath();
		context.lineWidth=10;
		context.strokeStyle="red";
		context.moveTo(0,0);
		context.lineTo(100,0);
		context.stroke();
		context.closePath();
		
		context.restore();
		*/
		var g = context.createLinearGradient(0,0,0,200);
		g.addColorStop(0,"90BFFF");
		g.addColorStop(1,"white");
		context.fillStyle = g;
		context.fillRect(0,0,1,200);
		
		window.location = c.toDataURL("image/jpeg").replace("image/jpeg","image/octet-stream");
	</script>
	
	
	
	
	
	
	
	
	
	
	
</body>

匠子心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画渐变背景图片，自动下载

drawBgLine.htmlhtml5画渐变背景图片，并自动下载 //第一步：获取canvas对象 var c = document.getElementById("c"); //第二步：获取canvas对象的上下文对象 var context = c.getContext("2d"); /* * 这些是画其他图形代码
复制链接

扫一扫