用画布canvas画安卓logo

 <!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的更多相关文章

HTML5画布Canvas
一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...
canvas画时钟，重拾乐趣!
canvas时钟--效果图一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...
H5之画布canvas小记，以及通过画布实现原子无规则运动
我们知道html在h5出之前就仅仅只是一个标签,一个标记,语义化并不强,后来新增的标签如video,audio都是语义化更强(让人一看就懂是什么东西,反正我是这么理解的,一个div不代表着什么),本身 ...
canvas画流程图
用canvas画流程图: 需求:最后一个圆圈无直线遇到问题:需要画多个圆圈时,画布超出显示屏加滚动条,解决方法是<canvas>外层<div>的width=100%,且ove ...
canvas画圆类似于锯齿指针 angular5
拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angul ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
撩妹技能 get，教你用 canvas 画一场流星雨
开始妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...
10分钟，利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
利用canvas画一个实时时钟
先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

随机推荐

MySQL Metadata
http://www.devart.com/dotconnect/mysql/docs/MetaData.html In this overload first parameter is name o ...
简易搭建git仓库、关联远程和本地仓库方法。克隆仓库方法。同一台电脑上创建两个git ssh key方法。
一,在github上建仓库 react-js-antd-demo: 二:将远程仓库与本地仓库关联 git remote add origin git@github.com:begin256/react ...
JQuery 判断指定ID是否存在
Python实现冒泡，选择排序
def bubble(num): for i in range(len(num)-1): for j in range(len(num)-i-1): if(num[j]>num[j+1]): t ...
在 ubuntu 上运行 php 脚本
在 ubuntu 上运行 php 脚本一.配置运行环境 1.要在 ubuntu 上运行 php 脚本,需要安装 Apache2 和 PHP 具体步骤,请参考:Ubuntu 搭建Web服务器(MySQ ...
没有对比就没有伤害,memcache and redis
Memcached 与 Redis 的关键性能指标比较性能对比: Redis 只使用单核,而 Memcached 可以使用多核,所以平均每一个核上 Redis在存储小数据时比 Memcached 性 ...
org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/JJ]]
1. 如果webapps下有同名的文件,会出现以上错误: 2.解决办法: 查看项目的目录结构是否正确,对于servlet项目,WEB-INF下应该有一个classes目录,存放编译好的.class文件 ...
Mysql进阶-day2
Mysql cmake方式安装 1.卸载原有mysql下载MySQL安装包 [root@localhost ~]# yum remove mysql* -y [root@localhost ~]# m ...
ETCD TLS 配置的坑
一.环境准备环境总共 3 台虚拟机,系统为centos7,1个 master,2 个 etcd 节点,master 同时也作为 node 负载 pod,在分发证书等阶段将在另外一台主机上执行,该主机 ...
解决python3 UnicodeDecodeError: 'gbk' codec can't decode byte
本来想写个html来玩玩,结果读取文件得时候就BUG了.... 以下代码读取html中无中文没有问题. def handle_request(client): buf = client.recv(10 ...

用画布canvas画安卓logo

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

随机推荐

热门专题