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

drawBgLine.html

复制代码

代码如下:

<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>