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(); </script>

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");