도라에몽 캔버스

    
    
    



<br>    window.οnlοad=function(){<br>        var cxt=document.getElementById('canvas').getContext('2d');<br>        cxt.beginPath();<br>        cxt.lineWidth=1;<br>        cxt.strokeStyle="black";<br>        cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);<br>        var head = cxt.createRadialGradient(260,25,8,200,175,175);<br>        head.addColorStop(0,"white");<br>        head.addColorStop(1,"#16B3DC");<br>        cxt.fillStyle=head;<br>        cxt.fill();<br>        cxt.stroke();<br>        // <br>        cxt.beginPath();<br>        cxt.fillStyle="white";<br>        cxt.moveTo(110,110);<br>        cxt.quadraticCurveTo(-10,200,120,315);<br>        cxt.lineTo(280,315);<br>        cxt.quadraticCurveTo(410,210,290,110);<br>        cxt.lineTo(110,110);<br>        cxt.fill();<br>        cxt.stroke();<br>        // <br>        cxt.beginPath();<br>        cxt.lineWidth=1;<br>        cxt.fillStyle="white";<br>        cxt.moveTo(110,100);<br>        cxt.bezierCurveTo(110,25,200,25,200,100);<br>        cxt.bezierCurveTo(200,175,110,175,110,100);<br>        cxt.moveTo(200,100);<br>        cxt.bezierCurveTo(200,25,290,25,290,100);<br>        cxt.bezierCurveTo(290,175,200,175,200,100);<br>        cxt.fill();<br>        cxt.stroke();<br>        // <br>        cxt.beginPath();<br>        cxt.arc(200,165,25,0,2*Math.PI);<br>        var radial = cxt.createRadialGradient(212,155,3,200,165,25);<br>        radial.addColorStop(0,"white");<br>        radial.addColorStop(1,"#D05823");<br>        cxt.fillStyle=radial;<br>        cxt.fill();<br>        cxt.stroke();<br>        // <br>        cxt.beginPath();<br>        cxt.fillStyle="black";<br>        doraemon(cxt,230,130);<br>        cxt.fill();<br>        cxt.stroke();<br><br>        cxt.beginPath();<br>        cxt.fillStyle="black";<br>        doraemon(cxt,170,130);<br>        cxt.fill();<br>        cxt.stroke();<br><br>        // <br>        cxt.beginPath();<br>        cxt.moveTo(80,175);<br>        cxt.lineTo(150,195);<br>        cxt.moveTo(80,200);<br>        cxt.lineTo(150,205);<br>        cxt.moveTo(80,225);<br>        cxt.lineTo(150,215);<br>        cxt.moveTo(200,195);<br>        cxt.lineTo(200,290);<br><br>        cxt.moveTo(250,195);<br>        cxt.lineTo(320,175);<br>        cxt.moveTo(250,205);<br>        cxt.lineTo(320,200);<br>        cxt.moveTo(250,215);<br>        cxt.lineTo(320,225);<br>        cxt.moveTo(80,240);<br>        cxt.quadraticCurveTo(200,350,320,240);<br>        cxt.stroke();<br>        cxt.beginPath();<br>        cxt.moveTo(96,316);<br>        cxt.lineTo(305,316);<br><br>        cxt.lineTo(320,316);<br>        cxt.arcTo(330,316,330,326,10);<br>        cxt.lineTo(330,336);<br>        cxt.arcTo(330,346,305,346,10);<br>        cxt.lineTo(81,346);<br>        cxt.arcTo(71,346,71,336,10);<br>        cxt.lineTo(71,326);<br>        cxt.arcTo(71,316,81,316,10);<br>        cxt.lineTo(96,316);<br>        var neck = cxt.createLinearGradient(96,316,305,316);<br>        neck.addColorStop(0,"#B13209");<br>        neck.addColorStop(1,"white");<br>        cxt.fillStyle=neck;<br>        cxt.fill();<br>        cxt.stroke();<br><br><br>        // <br>        cxt.beginPath();<br>        cxt.fillStyle="#0BB0DA";<br>        cxt.moveTo(80,346);<br>        cxt.lineTo(26,406);<br>        cxt.lineTo(65,440);<br>        cxt.lineTo(85,418);<br>        cxt.lineTo(85,528);<br>        cxt.lineTo(185,528);<br>        cxt.bezierCurveTo(185,505,215,505,215,528);<br>        cxt.lineTo(315,528);<br>        cxt.lineTo(315,418);<br>        cxt.lineTo(337,440);<br>        cxt.lineTo(374,406);<br>        cxt.lineTo(320,346);<br>        cxt.fill();<br>        cxt.stroke();<br><br>        // <br>        cxt.beginPath();<br>        cxt.fillStyle='white';<br>        cxt.arc(32,438,32,0,2*Math.PI);<br>        cxt.fill();<br>        cxt.stroke();<br>        // <br>        cxt.beginPath();<br>        cxt.fillStyle='white';<br>        cxt.arc(368,438,32,0,2*Math.PI);<br>        cxt.fill();<br>        cxt.stroke();<br><br>        // <br>        cxt.beginPath();<br>        cxt.fillStyle="white";<br>        cxt.arc(200,399,90,1.8*Math.PI,1.2*Math.PI);<br>        cxt.fill();<br>        cxt.stroke();<br><br>        cxt.beginPath();<br>        cxt.moveTo(130,399);<br>        cxt.lineTo(270,399);<br>        cxt.bezierCurveTo(270,489,130,489,130,399);<br>        cxt.stroke();<br><br>        // <br>        cxt.beginPath();<br>        cxt.arc(200,358,28,0,2*Math.PI);<br>        var neck = cxt.createRadialGradient(220,340,0,200,358,30);<br>        neck.addColorStop(0,"white");<br>        neck.addColorStop(1,"#F1EB55");<br>        cxt.fillStyle=neck;<br>        cxt.fill();<br>        cxt.stroke();<br><br>        cxt.beginPath();<br>        cxt.moveTo(178,340);<br>        cxt.lineTo(222,340);<br>        cxt.moveTo(173,349);<br>        cxt.lineTo(226,349);<br>        cxt.moveTo(200,367);<br>        cxt.lineTo(200,387);<br>        cxt.stroke();<br><br>        cxt.beginPath();<br>        cxt.fillStyle="black";<br>        cxt.arc(200,363,8,0,2*Math.PI);<br>        cxt.fill();<br>        cxt.stroke();<br><br>        // <br>        cxt.beginPath();<br>        cxt.moveTo(85,528),<br>                cxt.lineTo(75,528),<br>                cxt.bezierCurveTo(50,528,50,562,75,562);<br>        cxt.lineTo(185,562);<br>        cxt.bezierCurveTo(204,562,204,528,185,528);<br>        cxt.stroke();<br>        // <br>        cxt.beginPath();<br>        cxt.moveTo(215,528),<br>                cxt.bezierCurveTo(196,528,196,562,215,562);<br>        cxt.lineTo(325,562);<br>        cxt.bezierCurveTo(345,562,345,528,325,528);<br>        cxt.lineTo(315,528);<br>        cxt.stroke();<br><br>    }<br>    function doraemon(cxt,x,y){<br>        cxt.arc(x,y,12,0,2*Math.PI);<br>    }<br>    // doraemon();<br>

다음으로 전송:https://www.cnblogs.com/dream0530/p/6137855.html