<!doctype html><html lang="en"><head><meta charset=utf-8 /><title>绘制路径</title></head><body><canvas style=" background:#000;"></canvas><script>//绘制火柴人var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d');//绘制头部ctx.beginPath();ctx.arc(100, 35, 25, 0, Math.PI*2, true);ctx.fillStyle = '#fff';ctx.fill();//绘制笑脸ctx.beginPath();ctx.strokeStyle = '#c00';ctx.lineWidth = 3;ctx.arc(100, 37, 15, 0, Math.PI, false);ctx.stroke();//绘制眼睛ctx.beginPath();ctx.fillStyle = '#c00';//绘制左眼ctx.arc(90, 30, 2, 0, Math.PI*2, true);ctx.fill();ctx.moveTo(113, 30);//绘制右眼ctx.arc(110, 30, 2, 0, Math.PI*2, true);ctx.fill();ctx.stroke();//绘制身体ctx.beginPath();ctx.fillStyle = '#fff';ctx.fillRect(98, 55, 3, 50);//绘制胳膊ctx.beginPath();//绘制左胳膊ctx.moveTo(70, 100);ctx.lineTo(100, 70);ctx.stroke();</script></body></html>
<!doctype html><html lang="en"><head><meta charset=utf-8 /><title>绘制路径</title></head><body><canvas style=" background:#000;"></canvas><script> //绘制火柴人 var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); //绘制头部 ctx.beginPath(); ctx.arc(100, 35, 25, 0, Math.PI * 2, true); ctx.fillStyle = '#fff'; ctx.fill(); //绘制笑脸 ctx.beginPath(); ctx.strokeStyle = '#c00'; ctx.lineWidth = 3; ctx.arc(100, 37, 15, 0, Math.PI, false); ctx.stroke(); //绘制眼睛 ctx.beginPath(); ctx.fillStyle = '#c00'; //绘制左眼 ctx.arc(90, 30, 2, 0, Math.PI * 2, true); ctx.fill(); ctx.moveTo(113, 30); //绘制右眼 ctx.arc(110, 30, 2, 0, Math.PI * 2, true); ctx.fill(); ctx.stroke(); //绘制身体 ctx.beginPath(); ctx.fillStyle = '#fff'; ctx.fillRect(98, 55, 3, 50); //绘制胳膊 ctx.beginPath(); //绘制左胳膊 ctx.moveTo(70, 100); ctx.lineTo(100, 70); //绘制右胳膊 ctx.moveTo(120, 100); ctx.lineTo(100, 70); ctx.stroke();</script></body></html> HTML code
nbsp;html>
