渐变HTML5画渐变背景图片并自动下载实现步骤

渐变图片时间:2021-04-21 阅读:()

★精品文档★

HTML5画渐变背景图片并自动下载实现步

骤

HTML5可以画渐变背景图片并自动下载下面为大家分解下详细的步骤喜欢的朋友不要错过哦drawBgLine.html

代码如下:

< !DOCTYPE html

<head

<titlehtml5 画渐变背景图片 并自动下载</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” ) ;

1/4

★精品文档★

*这些是画其他图形代码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) ;

2/4

★精品文档★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

3/4

★精品文档★

4/4

展开全文