| <!DOCTYPE HTML>
|
| <html>
|
| <head>
|
| <meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
| <script type="application/javascript">
|
| function draw_m() {
|
| var m_canvas = document.getElementById('m');
|
| var m_canvas1 = document.getElementById('m1');
|
| var m_canvas2 = document.getElementById('m2');
|
|
|
| if(m_canvas.getContext) {
|
| var ctx = m_canvas.getContext('2d');
|
| var grad = ctx.createLinearGradient(0,0,0,200);
|
| grad.addColorStop(0, '#39c');
|
| grad.addColorStop(1, 'orange');
|
| ctx.fillStyle=grad;
|
| ctx.fillRect(10,10,200,190);
|
| }
|
| else {
|
| alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")
|
| }
|
|
|
| if(m_canvas1.getContext) {
|
| var ctx = m_canvas1.getContext('2d');
|
| var grad = ctx.createLinearGradient(0,0,0,200);
|
| grad.addColorStop(0, '#39c');
|
| grad.addColorStop(0.5, '#fff');
|
| grad.addColorStop(1, 'orange');
|
| ctx.fillStyle=grad;
|
| ctx.fillRect(10,10,200,190);
|
| }
|
| else {
|
| alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")
|
| }
|
|
|
| if(m_canvas2.getContext) {
|
| var ctx = m_canvas2.getContext('2d');
|
| var radgrad = ctx.createRadialGradient(45,45,10,62,60,80);
|
| radgrad.addColorStop(0, '#A7D30C');
|
| radgrad.addColorStop(1, 'rgb(1,159,98)');
|
| ctx.fillStyle = radgrad;
|
| ctx.arc(80,80,80,0,Math.PI*2,true);
|
| ctx.fill();
|
| }
|
| else {
|
| alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")
|
| }
|
| }
|
| </script>
|
| </head>
|
| <body onload="draw_m()">
|
| <canvas id="m" width="300" height="350"></canvas>
|
| <canvas id="m1" width="300" height="350"></canvas>
|
| <canvas id="m2" width="300" height="350"></canvas>
|
| </body>
|
|
</html>
참고 : linegrad.html, mystyle.html
|
|
