HTML5 그라데이션 배경 이미지 그리기 및 구현 자동 다운로드 steps_html5 튜토리얼 기술

drawBgLine.html

코드 복사

코드는 다음과 같습니다.

;/ center>
<script> <br /> //1단계: 캔버스 객체 가져오기 <br /> var c = document.getElementById("c") <br /> //컨텍스트 가져오기 캔버스 객체 Object <br /> var context = c.getContext("2d"); <br /> /* <br /> * 다른 그래픽을 그리는 코드입니다. <br /> context.beginPath() <br /> context.lineWidth =10; <br /> context.StrokeStyle="red"; <br /> context.lineTo(150,50); <br /> context.closePath( ); <br /> //context.strokRect(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.lineWidth=1; <br /> context.fillText("briup" ,0,220); <br /> context.save(); <br /> context.rotate(90*Math.PI/180); <br /> context .lineWidth=10; <br /> context.StrokeStyle="red"; <br /> context.moveTo(0,0) <br /> context.lineTo(100,0); (); <br /> context.closePath(); <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 /> = c.toDataURL ("image/jpeg").replace("image/jpeg","image/octet-stream") ​​<br /> </script>