首頁 > web前端 > H5教程 > HTML5畫漸層背景圖片並自動下載實作步驟_html5教學技巧

HTML5畫漸層背景圖片並自動下載實作步驟_html5教學技巧

WBOY
發布: 2016-05-16 15:48:35
原創
1581 人瀏覽過

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(); </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");
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板