用画布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"& ...
随机推荐
- Line Numbers for RichText Control in C#
from: http://www.codeproject.com/Articles/38858/Line-Numbers-for-RichText-Control-in-C using Microso ...
- word 文档刷文字格式
WORD文档增加的宏文件, 作用:对全文中文字体更改为,DFKai-SB :对英文字母字体更改为,Times New Roman Sub AutoClose() Selection.WholeStor ...
- 02_Netty实现的Echo服务器和客户端
[Echo服务端] [EchoServer] public class EchoServer { private final int port; public EchoServer(int port) ...
- Ubuntu 搭建Web服务器(MySQL+PHP+Apache)详细教程
Ubuntu 搭建Web服务器(MySQL+PHP+Apache)详细教程 看了好多人的博客,有的不全 or 有问题,整理了一下,适合小白 新手先整理几个小问题 1.为啥使用 Linux 搭建服务器? ...
- BIEE总结
一,数据仓库,BI涉及到的相关概念 1.DW: 即数据仓库(Data Warehouse),是一个面向主题的(Subject Oriented).集成的(Integrated).相对稳定的(N ...
- CentOS随笔 - 修改CentOS7的IP
前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 在使用CentOS时经常我们需要固定一个IP, 因为服务器嘛,不固定IP. 难道每次都要配置开发环境的地址.? ...
- awk单行脚本快速参考
AWK单行脚本快速参考 2008年4月28日编辑: Eric Pement eric [at] pement.org 版本 0.26翻译: 董一粟 yisudong [at] gmail.com 最新 ...
- sequelize 学习之路
如果你觉得Sequelize的文档有点多.杂,不方便看,可以看看这篇. 在使用NodeJS来关系型操作数据库时,为了方便,通常都会选择一个合适的ORM(Object Relationship Mode ...
- 期末作品项目+ppt+设计文档，电子商城的实现，PC+IOS
先透露几张图 ---- 可以作为文档模板来用... 下载地址 https://dev.tencent.com/u/whuanle/p/IOS_work/attachment/4563020
- 内网渗透之IPC，远程执行
开启服务 net start Schedule net start wmiApSrv 关闭防火墙 net stop sharedaccess net use \\目标IP\ipc$ "&qu ...