用画布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"& ...
随机推荐
- BZOJ2187：fraction
Sol 分情况讨论 \(\lfloor\frac{a}{b}\rfloor+1\le \lceil\frac{c}{d}\rceil-1\) 直接取 \(q=1,p=\lfloor\frac{a}{b ...
- css 超出部分以省略号的形式显示
想要实现文字超出部分以省略号的形式显示首先需要给此元素设置一个宽度,然后添加以下属性 overflow: hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/*超出 ...
- WinForm实现Rabbitmq官网6个案例-RPC
获取源码 客户端代码: namespace RabbitMQDemo { public partial class RPC : Form { private readonly static RPC _ ...
- 远景平台开发者上线，专业API免费使用
远景平台开发者上线,欢迎大伙围观使用. 在开发者中心你可以做什么? 1.管理你的应用,通过APPKEY获取在线API.使用云中的数据和地图. 2.学习API的使用,包含API参考和部分例子(目前例子很 ...
- MySQL数据库(13)----忘记root用户密码解决方案【转载】
1．首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也可以任意地登录 ...
- Qt Quick程序的发布
要将程序发布出去,首先需要使用release方式编译程序,然后将生成的.exe可执行文件和需要的库文件发在一起打包进行发布. 要确定需要哪些动态库文件,可以直接双击.exe文件,提示缺少那个dll文件 ...
- win10命令控制符
IP:ipconfigIP地址侦测器:Nslookup显卡:dxdiag控制面板:control电话拨号:dialer木马捆绑工具,系统自带:iexpress本地用户和组:lusrmgr.msc鼠标属 ...
- springboot整合fastdfs实现上传和下载
FastDFS_Client源码 https://github.com/tobato/FastDFS_Client 友情提示:由于FastDFS_Client这个源码不是很多,并且目前没有找到相关文档 ...
- C#-MDI-多窗口通信方法总结
总结C#中窗体间传递数据的几种方法 (由别人的方法整理) 转自:http://blog.csdn.net/daisy423xu/article/details/1579854 在编写C#windows ...
- c# 设计模式 之：工厂模式之---简单工厂
1.uml类图如下: 具体实现和依赖关系: 实现:SportCar.JeepCar.HatchbackCar 实现 Icar接口 依赖: Factory依赖 SportCar.JeepCar.Hatc ...