用画布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"& ...
随机推荐
- BZOJ 3809Gty的二逼妹子序列 解题报告+data marker
--BZOJ http://www.lydsy.com/JudgeOnline/problem.php?id=3809 考虑对l,r跑莫队,对一组维护美丽度出现次数的桶修改, 然后把桶序列用分块维护查 ...
- Tomcat学习总结（一）：目录简介
一:下载地址和目录结构说明. Tomcat官方站点:http://jakarta.apache.org 下载Tomcat安装程序包:http://tomcat.apache.org/
- WiFiDog 与 AuthServer
背景 在一些公共场所(比如公交车.地跌.机场等)连接当地的 WiFi 时会弹出一个验证表单,输入验证信息(比如短信验证码)后就能够通过该 WiFi 联网. 本文将介绍通过 OpenWrt WiFiDo ...
- ArcGIS最权威、最专业的技术分享网站：积思园（www.iarcgis.com)
你对iArcGIS.com说点什么 为什么会有该网站的产生 在这个所谓的“大数据”的时代,每个人都深陷于海量信息无法自拔,因为过多碎片化的数据只会让自己的思维更加迷离,快餐式的阅读只会让自己变得虚胖. ...
- java 分次读取大文件的三种方法
1. java 读取大文件的困难 java 读取文件的一般操作是将文件数据全部读取到内存中,然后再对数据进行操作.例如 Path path = Paths.get("file path&qu ...
- 微信开发——微信公众平台实现消息接收以及消息的处理（Java版）
本文主要讲述了如何在微信公众平台实现消息接收以及消息的处理,使用java语言开发,现在把实现思路和代码整理出来分先给兄弟们,希望给他们带来帮助. 温馨提示: 这篇文章是依赖前几篇的文章的. 第一篇:微 ...
- 在 Windows 容器中使用 gMSA
前不久给公司搭测试环境,其中涉及到了某组件在容器中使用 kerberos 身份验证连接 SQL Server 数据库的问题. Windows 容器本身并不能加入域,但可以通过 gMSA 运行容器使容器 ...
- Python学习---JSONP学习180130
同源策略机制 同源:协议://IP:端口[协议,域名,端口相同] 跨域:知道对方接口,同时对方返回的数据也必须是Jsonp格式的 问题描述:Ajax跨域请求数据的时候,实际浏览器已 ...
- 把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.
用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com ...
- angularJs的作用域和依赖注入
一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找 &rootScope这是全局作用域 <!DOCTYPE HTML&g ...