canvas画小叮当
Posted biaowei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas画小叮当相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小叮当</title> <style> .container{ margin: 0 auto; width: 800px; } body{ margin: 0; padding: 0; } #doraemon{ background-color: #fff; display: block; } </style> </head> <body onmousemove="zuobiao(event)"> <div class="container"> <canvas id="doraemon" width="600" height="600"></canvas> </div> <div id="put" style="width: 50px" height="20px"; ></div> <script> window.onload=function(){ var cxt=document.getElementById(‘doraemon‘).getContext(‘2d‘); /*绘制小叮当头部*/ cxt.beginPath();//开始作图标志 cxt.lineWidth=1;//线宽为1 cxt.strokeStyle=‘#000‘;//线条的颜色 cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI); cxt.fillStyle=‘#0bb0da‘; cxt.fill(); cxt.stroke();//绘制路径 /*画脸*/ cxt.beginPath(); cxt.fillStyle=‘#fff‘; cxt.moveTo(110,110); cxt.quadraticCurveTo(-10,200,120,315); cxt.lineTo(280,315); cxt.quadraticCurveTo(410,210,290,110); cxt.lineTo(110,110); cxt.fill(); cxt.stroke(); /*眼睛*/ cxt.beginPath(); cxt.lineWidth = 1; cxt.fillStyle = ‘#fff‘; cxt.moveTo(110, 110); cxt.bezierCurveTo(110, 25, 200, 25, 200, 100);//创建三次贝塞尔曲线,控制点1(110,25),控制点2(200,25),结束点(200,100)，也就是画左上半椭圆 cxt.bezierCurveTo(200, 175, 110, 175, 110, 100);//画左下半椭圆 cxt.moveTo(200, 100); cxt.bezierCurveTo(200, 25, 290, 25, 290, 100); cxt.bezierCurveTo(290, 175, 200, 175, 200, 100); cxt.fill(); cxt.stroke(); /*左眼球*/ cxt.beginPath(); cxt.fillStyle="red"; cxt.arc(170,130,15,0,2*Math.PI); cxt.fill(); cxt.stroke(); /*右眼球*/ cxt.beginPath(); cxt.fillStyle="red"; cxt.arc(230,130,15,0,2*Math.PI); cxt.fill(); cxt.stroke(); /*鼻子*/ cxt.beginPath(); cxt.fillStyle="red"; cxt.arc(200,165,25,0,2*Math.PI); cxt.fill(); cxt.stroke(); /*胡子*/ //左胡须 cxt.beginPath(); cxt.moveTo(80, 175); cxt.lineTo(150, 195); cxt.moveTo(80, 200); cxt.lineTo(150, 205); cxt.moveTo(80, 225); cxt.lineTo(150, 215); //中部胡须 cxt.moveTo(200, 195); cxt.lineTo(200, 290); //右胡须 cxt.moveTo(250, 195); cxt.lineTo(320, 175); cxt.moveTo(250, 205); cxt.lineTo(320, 200); cxt.moveTo(250, 215); cxt.lineTo(320, 225); cxt.stroke(); /*嘴*/ cxt.moveTo(80, 240); cxt.quadraticCurveTo(200, 350, 320, 240); cxt.stroke(); //狗链 cxt.beginPath(); cxt.moveTo(96, 316); cxt.lineTo(305, 316); cxt.lineTo(320, 316); cxt.arcTo(330, 316, 330, 326, 10);//在画布上创建介于两个切线之间的弧，起点坐标为(330,316),终点坐标为(330,326),半径为10 cxt.lineTo(330, 336); cxt.arcTo(330, 346, 305, 346, 10); cxt.lineTo(81, 346); cxt.arcTo(71, 346, 71, 336, 10); cxt.lineTo(71, 326); cxt.arcTo(71, 316, 81, 316, 10); cxt.lineTo(96, 316); cxt.fillStyle = ‘#b13209‘; cxt.fill(); cxt.stroke(); /*下半身*/ cxt.beginPath(); cxt.fillStyle = ‘#0bb0da‘; cxt.moveTo(80, 346); //左衣服 cxt.lineTo(26, 406); cxt.lineTo(65, 440); cxt.lineTo(85, 418); cxt.lineTo(85, 528); cxt.lineTo(185, 528); //右衣服 cxt.lineTo(315, 528); cxt.lineTo(315, 418); cxt.lineTo(337, 440); cxt.lineTo(374, 406); cxt.lineTo(320, 346); cxt.fill(); cxt.stroke(); /*手*/ //左手 cxt.beginPath(); cxt.fillStyle = ‘#fff‘; cxt.arc(37, 433, 30, 0, 2 * Math.PI); cxt.fill(); cxt.stroke(); //右手 cxt.beginPath(); cxt.fillStyle = ‘#fff‘; cxt.arc(363, 433, 30, 0, 2 * Math.PI); cxt.fill(); cxt.stroke(); /*肚*/ cxt.beginPath(); cxt.fillStyle = ‘#fff‘; cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI); cxt.fill(); cxt.stroke(); //小口袋 cxt.beginPath(); cxt.fillStyle = ‘#fff‘; cxt.moveTo(130, 394); cxt.lineTo(270, 394); cxt.moveTo(130, 394); cxt.bezierCurveTo(130, 490, 270, 490, 270, 394); cxt.fill(); cxt.stroke(); /*两只脚的空隙*/ cxt.beginPath(); cxt.fillStyle = ‘#fff‘; cxt.arc(200, 529, 20,Math.PI, 0); cxt.fill(); cxt.stroke(); /*脚*/ //左脚 cxt.beginPath(); cxt.fillStyle=‘#fff‘; cxt.moveTo(180,528); cxt.lineTo(72,528); cxt.bezierCurveTo(52,528,52,558,72,558); cxt.lineTo(180,558); cxt.moveTo(180,558); cxt.bezierCurveTo(200,558,200,528,180,528); cxt.fill(); cxt.stroke(); //右脚 cxt.beginPath(); cxt.fillStyle=‘#fff‘; cxt.moveTo(220,528); cxt.lineTo(328,528); cxt.bezierCurveTo(348,528,348,558,328,558); cxt.lineTo(220,558); cxt.moveTo(220,558); cxt.bezierCurveTo(200,558,200,528,220,528); cxt.fill(); cxt.stroke(); } function zuobiao(event){ var x=event.clientX; var y=event.clientY; var out=document.getElementById("put"); out.innerHTML="x:"+x+"y:"+y; } </script> </body> </html>
以上是关于canvas画小叮当的主要内容，如果未能解决你的问题，请参考以下文章
自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一 ，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段