html5 캔버스는 매우 강력합니다. 다음 기사에서는 html5 캔버스를 사용하여 간단한 도라에몽 헤드를 구현합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
효과는 다음과 같습니다:
코드는 다음과 같습니다:
<div class="doraemon"> <canvas id="face" width="600" height="1500">您的浏览器不支持canvas</canvas> </div> <script> var face = document.getElementById('face').getContext("2d"); face.arc(252,252,250,0,360*Math.PI/180); face.fillStyle = '#07beea'; //设置填充颜色 face.fill(); //填充 face.lineWidth = 2; //轮廓线宽度 face.strokeStyle = '#333'; //轮廓线颜色 face.stroke(); //画轮廓线 face.beginPath(); //重置当前绘画路径 face.moveTo(160,450); //画笔移动到起始点 face.bezierCurveTo(0,400,0,110,210,115); //三次贝塞尔曲线(左边) face.lineTo(290,115); face.bezierCurveTo(500,110,500,400,340,450); face.bezierCurveTo(280,470,220,470,160,450); face.fillStyle = '#fff'; face.fill(); face.stroke(); //画出边框 face.beginPath(); //重置当前绘画路径 用于画眼睛和鼻子 face.moveTo(150,150); face.lineTo(150,100); //左眼左竖线 face.bezierCurveTo(160,50,240,50,250,100); //左眼下面 face.lineTo(250,150); //左眼右竖线 face.bezierCurveTo(240,200,160,200,150,150); //左眼上面 face.moveTo(250,150); face.lineTo(250,100); //右眼左竖线 face.bezierCurveTo(260,50,340,50,350,100); //右眼上面 face.lineTo(350,150); //右眼右竖线 face.bezierCurveTo(340,200,260,200,250,150); //右眼下面 face.fillStyle = '#fff'; face.fill(); face.stroke(); face.beginPath(); face.arc(225,155,10,0,360*Math.PI/180); //眼珠 face.arc(275,155,10,0,360*Math.PI/180); face.fillStyle = '#333'; face.fill(); face.beginPath(); //鼻子 face.arc(250,197,25,0,360*Math.PI/180); face.fillStyle = '#c93e00'; face.fill(); face.stroke(); face.beginPath(); face.arc(260,190,10,0,360*Math.PI/180); var grd = face.createRadialGradient(260,190,2,260,190,10); //设置内外圆原点和半径 grd.addColorStop(0,'#fff'); grd.addColorStop(1,'#c93e00'); face.fillStyle = grd; face.fill(); //嘴巴 face.beginPath(); face.moveTo(250,222); face.lineTo(250,395); face.moveTo(100,320); face.bezierCurveTo(180,420,320,420,400,320); face.lineWidth = 3; face.stroke(); //胡须 face.beginPath(); face.moveTo(80,200); face.lineTo(180,220); face.moveTo(80,245); face.lineTo(180,245); face.moveTo(80,290); face.lineTo(180,270); face.moveTo(320,220); face.lineTo(420,200); face.moveTo(320,245); face.lineTo(420,245); face.moveTo(320,270); face.lineTo(420,290); face.stroke(); </script>
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 HTML5는 캔버스를 사용하여 도라에몽의 머리를 그립니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!