用画布canvas画安卓logo

非淡泊无以明志，非宁静无以致远。这篇文章主要讲述用画布canvas画安卓logo相关的知识，希望能为你提供帮助。

1 < !DOCTYPE html> 2 < html lang="en"> 3 4 < head> 5< meta charset="UTF-8"> 6< meta name="viewport" content="width=device-width, initial-scale=1.0"> 7< meta http-equiv="X-UA-Compatible" content="ie=edge"> 8< title> Document< /title> 9< style> 10#cs { 11border: 1px solid black; 12background: black; 13} 14< /style> 15 < /head> 16 17 < body> 18< canvas id="cs" width="500" height="500"> 19 20< /canvas> 21 22< script> 23let cs = document.getElementById(‘cs‘); 24let ctx = cs.getContext(‘2d‘); 25ctx.fillStyle = ‘green‘; 26ctx.arc(200, 100, 50, 0, Math.PI, true); 27ctx.globalCompositeOperation = ‘source-over‘; 28ctx.fill(); 29//眼睛 30ctx.beginPath(); 31ctx.arc(175, 80, 10, 0, Math.PI * 2, true); 32ctx.arc(222, 80, 10, 0, Math.PI * 2, true) 33ctx.fillStyle = ‘black‘; 34ctx.fill(); 35//耳朵 36ctx.beginPath(); 37ctx.lineCap = "round"; //设置返回线条 38ctx.lineWidth = 6; 39ctx.moveTo(160, 35); 40ctx.lineTo(175, 60); 41ctx.strokeStyle = "green"; 42ctx.stroke(); 43 44ctx.beginPath(); 45ctx.lineCap = "round"; //设置返回线条 46ctx.lineWidth = 6; 47ctx.moveTo(238, 35); 48ctx.lineTo(222, 60); 49ctx.strokeStyle = "green"; 50ctx.stroke(); 51 52//中间身体 53ctx.beginPath(); 54ctx.moveTo(150,110); 55ctx.lineTo(150,200); 56ctx.arcTo(150,210,160,210,10); 57ctx.lineTo(240,210); 58ctx.arcTo(250,210,250,200,10); 59ctx.lineTo(250,110); 60ctx.lineTo(150,110) 61ctx.strokeStyle = "green"; 62ctx.fillStyle=‘green‘; 63ctx.fill(); 64ctx.stroke(); 65//两只手 66ctx.beginPath(); 67ctx.lineCap = "round"; //设置返回线条 68ctx.lineWidth = 20; 69ctx.moveTo(130, 115); 70ctx.lineTo(130, 160); 71ctx.strokeStyle = "green"; 72ctx.stroke(); 73 74ctx.beginPath(); 75ctx.lineCap = "round"; //设置返回线条 76ctx.lineWidth = 20; 77ctx.moveTo(270, 115); 78ctx.lineTo(270, 160); 79ctx.strokeStyle = "green"; 80ctx.stroke(); 81 82//两只脚 83ctx.beginPath(); 84ctx.lineCap = "round"; //设置返回线条 85ctx.lineWidth = 22; 86ctx.moveTo(180, 215); 87ctx.lineTo(180, 250); 88ctx.strokeStyle = "green"; 89ctx.stroke(); 90 91ctx.beginPath(); 92ctx.lineCap = "round"; //设置返回线条 93ctx.lineWidth = 22; 94ctx.moveTo(220, 215); 95ctx.lineTo(220, 250); 96ctx.strokeStyle = "green"; 97ctx.stroke(); 98< /script> 99 < /body> 100 101 < /html>

【用画布canvas画安卓logo】