HTML5画渐变背景图片并自动下载实现步骤
程序员文章站
2023-11-17 14:48:04
HTML5可以画渐变背景图片并自动下载，下面为大家分解下详细的步骤，喜欢的朋友不要错过哦... 13-11-18...
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>
复制代码
代码如下:<!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>
下一篇： Unity shader实现高斯模糊效果