用畫布canvas畫安卓logo

最後更新：2018-06-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：composite 眼睛 nbsp glob rip IV ext set fill

  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 { 11             border: 1px solid black; 12             background: black; 13         } 14     </style> 15 </head> 16  17 <body> 18     <canvas id="cs" width="500" height="500"> 19  20     </canvas> 21  22     <script> 23         let cs = document.getElementById(‘cs‘); 24         let ctx = cs.getContext(‘2d‘); 25         ctx.fillStyle = ‘green‘; 26         ctx.arc(200, 100, 50, 0, Math.PI, true); 27         ctx.globalCompositeOperation = ‘source-over‘; 28         ctx.fill(); 29         //眼睛 30         ctx.beginPath(); 31         ctx.arc(175, 80, 10, 0, Math.PI * 2, true); 32         ctx.arc(222, 80, 10, 0, Math.PI * 2, true) 33         ctx.fillStyle = ‘black‘; 34         ctx.fill(); 35         //耳朵 36         ctx.beginPath(); 37         ctx.lineCap = "round";//設定返回線條 38         ctx.lineWidth = 6; 39         ctx.moveTo(160, 35); 40         ctx.lineTo(175, 60); 41         ctx.strokeStyle = "green"; 42         ctx.stroke(); 43  44         ctx.beginPath(); 45         ctx.lineCap = "round";//設定返回線條 46         ctx.lineWidth = 6; 47         ctx.moveTo(238, 35); 48         ctx.lineTo(222, 60); 49         ctx.strokeStyle = "green"; 50         ctx.stroke(); 51  52         //中間身體 53         ctx.beginPath();     54         ctx.moveTo(150,110); 55         ctx.lineTo(150,200); 56         ctx.arcTo(150,210,160,210,10); 57         ctx.lineTo(240,210); 58         ctx.arcTo(250,210,250,200,10); 59         ctx.lineTo(250,110); 60         ctx.lineTo(150,110) 61         ctx.strokeStyle = "green"; 62         ctx.fillStyle=‘green‘; 63         ctx.fill(); 64         ctx.stroke(); 65         //兩隻手 66         ctx.beginPath(); 67         ctx.lineCap = "round";//設定返回線條 68         ctx.lineWidth = 20; 69         ctx.moveTo(130, 115); 70         ctx.lineTo(130, 160); 71         ctx.strokeStyle = "green"; 72         ctx.stroke(); 73  74         ctx.beginPath(); 75         ctx.lineCap = "round";//設定返回線條 76         ctx.lineWidth = 20; 77         ctx.moveTo(270, 115); 78         ctx.lineTo(270, 160); 79         ctx.strokeStyle = "green"; 80         ctx.stroke(); 81  82         //兩隻腳 83         ctx.beginPath(); 84         ctx.lineCap = "round";//設定返回線條 85         ctx.lineWidth = 22; 86         ctx.moveTo(180, 215); 87         ctx.lineTo(180, 250); 88         ctx.strokeStyle = "green"; 89         ctx.stroke(); 90  91         ctx.beginPath(); 92         ctx.lineCap = "round";//設定返回線條 93         ctx.lineWidth = 22; 94         ctx.moveTo(220, 215); 95         ctx.lineTo(220, 250); 96         ctx.strokeStyle = "green"; 97         ctx.stroke(); 98     </script> 99 </body>100 101 </html>

用畫布canvas畫安卓logo

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More