HTML5 drawing gradient background image and automatically downloading implementation steps_html5 tutorial skills

drawBgLine.html

Copy code

The code is as follows:

<script> <br> //Step 1: Get the canvas object <br> var c = document.getElementById("c"); <br> //Step 2: Get the context of the canvas object Object <br> var context = c.getContext("2d"); <br> /* <br> * These are codes for drawing other graphics <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>