首页 > web前端 > H5教程 > 正文

HTML5画渐变背景图片并自动下载实现步骤_html5教程技巧

WBOY
发布: 2016-05-16 15:48:35
原创
1555 人浏览过

drawBgLine.html

复制代码
代码如下:




html5画渐变背景图片,并自动下载





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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!