<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         #cs {

             border: 1px solid black;

             background: black;

         }

     </style>

 </head>

 <body>

     <canvas id="cs" width="500" height="500">

     </canvas>

     <script>

         let cs = document.getElementById('cs');

         let ctx = cs.getContext('2d');

         ctx.fillStyle = 'green';

         ctx.arc(200, 100, 50, 0, Math.PI, true);

         ctx.globalCompositeOperation = 'source-over';

         ctx.fill();

         //眼睛

         ctx.beginPath();

         ctx.arc(175, 80, 10, 0, Math.PI * 2, true);

         ctx.arc(222, 80, 10, 0, Math.PI * 2, true)

         ctx.fillStyle = 'black';

         ctx.fill();

         //耳朵

         ctx.beginPath();

         ctx.lineCap = "round";//设置返回线条

         ctx.lineWidth = 6;

         ctx.moveTo(160, 35);

         ctx.lineTo(175, 60);

         ctx.strokeStyle = "green";

         ctx.stroke();

         ctx.beginPath();

         ctx.lineCap = "round";//设置返回线条

         ctx.lineWidth = 6;

         ctx.moveTo(238, 35);

         ctx.lineTo(222, 60);

         ctx.strokeStyle = "green";

         ctx.stroke();

         //中间身体

         ctx.beginPath();

         ctx.moveTo(150,110);

         ctx.lineTo(150,200);

         ctx.arcTo(150,210,160,210,10);

         ctx.lineTo(240,210);

         ctx.arcTo(250,210,250,200,10);

         ctx.lineTo(250,110);

         ctx.lineTo(150,110)

         ctx.strokeStyle = "green";

         ctx.fillStyle='green';

         ctx.fill();

         ctx.stroke();

         //两只手

         ctx.beginPath();

         ctx.lineCap = "round";//设置返回线条

         ctx.lineWidth = 20;

         ctx.moveTo(130, 115);

         ctx.lineTo(130, 160);

         ctx.strokeStyle = "green";

         ctx.stroke();

         ctx.beginPath();

         ctx.lineCap = "round";//设置返回线条

         ctx.lineWidth = 20;

         ctx.moveTo(270, 115);

         ctx.lineTo(270, 160);

         ctx.strokeStyle = "green";

         ctx.stroke();

         //两只脚

         ctx.beginPath();

         ctx.lineCap = "round";//设置返回线条

         ctx.lineWidth = 22;

         ctx.moveTo(180, 215);

         ctx.lineTo(180, 250);

         ctx.strokeStyle = "green";

         ctx.stroke();

         ctx.beginPath();

         ctx.lineCap = "round";//设置返回线条

         ctx.lineWidth = 22;

         ctx.moveTo(220, 215);

         ctx.lineTo(220, 250);

         ctx.strokeStyle = "green";

         ctx.stroke();

     </script>

 </body>

 </html>

用画布canvas画安卓logo的更多相关文章

  1. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  2. canvas画时钟，重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  3. H5之画布canvas小记，以及通过画布实现原子无规则运动

    我们知道html在h5出之前就仅仅只是一个标签,一个标记,语义化并不强,后来新增的标签如video,audio都是语义化更强(让人一看就懂是什么东西,反正我是这么理解的,一个div不代表着什么),本身 ...

  4. canvas画流程图

    用canvas画流程图: 需求:最后一个圆圈无直线 遇到问题:需要画多个圆圈时,画布超出显示屏加滚动条,解决方法是<canvas>外层<div>的width=100%,且ove ...

  5. canvas画圆类似于锯齿指针 angular5

    拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angul ...

  6. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  7. 撩妹技能 get，教你用 canvas 画一场流星雨

    开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...

  8. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  9. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

随机推荐

  1. HDU P3341 Lost's revenge 题解+数据生成器

    Lost and AekdyCoin are friends. They always play "number game"(A boring game based on numb ...

  2. 理解webpack4.splitChunks之maxInitialRequests

    maxInitialRequests是splitChunks里面比较难以理解的点之一,它表示允许入口并行加载的最大请求数,之所以有这个配置也是为了对拆分数量进行限制,不至于拆分出太多模块导致请求数量过 ...

  3. 用SumatraPdf实现PDF静默打印

    原文:https://yutuo.net/archives/24a22d50d6001564.html 之前做一系统,有一个打印PDF文件的需求,需求如下: 能指定打印机 能两面打印 最好能静默打印 ...

  4. Oracle案例09——ORA-12154: TNS:could not resolve the connect identifier specified

    DG处理的问题还是蛮多的,但这次遇到一个比较奇葩的事情,表面配置.网络都没啥问题,但主备的同步始终有问题,经过多次调整参数.重新部署问题依旧,最终还是求助mos问题得以解决,现将处理过程记录如下: 一 ...

  5. 模板继承and自定义模板标签和过滤器

    自定义模板标签和 过滤器: 因为模板标签和过滤器只给我们提供了 这么多 无法对我们的使用造成更多的便利 ,剩下的就需要我们自己去创建新的 模板标签和过滤器了 1.在settings中的INSTALLE ...

  6. Java实例---黑白五子棋[单机版]

    程序分析 FiveChessFrame.java package com.ftl.frame; import java.awt.Color; import java.awt.Font; import ...

  7. Linux下的Mysql的主从备份

    MySQL复制概述 MySQL数据库支持同步复制.单向.异步复制,在复制的过程中一个服务器充当主服务,而一个或多个服务器充当从服务器.主服务器将更新写入二进制日志文件,并维护文件的一个索引以跟踪日志循 ...

  8. 性状、生成器、闭包、OPcache【Modern PHP】

    目录 性状 Trait 生成器 闭包 Zend OPcache PHP发展这么多年,技术.架构都已经革新,了解现代PHP很重要,最近在看Model PHP这本书,系统的了解下PHP相关的概念. 性状 ...

  9. sqlserver-一次updlock和withnolock和with check option 的报错原因分析

    接口程序一直运行的很稳定,其中有一天进行了数据库的整改,导致程序不断报错, 报错信息如下 原因: 程序代码写入以下代码 select * from ViewName with(updlock) whe ...

  10. java抽象继承-模板方法

    //模板方法:步骤提前设计好,用的时候只需要改步骤内容 public class TemplateDemo { public static void main(String[] args) { // ...