直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用canvas绘制android机器人</title>

</head>

<body>

  <canvas id="myCanvas"></canvas>

  <script>

      var c = document.getElementById("myCanvas");

      var ctx = c.getContext("2d");

      var W = window.innerWidth-200;

      var H = window.innerHeight;

      c.width = W;

      c.height = H;

      drawRobot();

      function drawRobot(){

          var color = '#a4ca39';

          ctx.save(); //锁画布(为了保存之前的画布状态)

//        ctx.scale(0.3,0.3);//缩放图形

//        ctx.translate(transX,transY);//距离原位置起点的偏移

          ctx.fillStyle = color;

          // 头部

          drawHead(140,100,92);

          function drawHead(startX,startY,radius){

              ctx.beginPath();

              ctx.arc(startX,startY,radius,0,Math.PI,true);

              ctx.fill();

          }

          //眼睛

          drawEye(95,60,8);

          drawEye(174,60,8);

          function drawEye(startX,startY,radius){

              ctx.fillStyle = "#ffffff";

              ctx.beginPath();

              ctx.arc(startX,startY,radius,0,2*Math.PI);

              ctx.fill();

          }

          //触角

          drawWireLeft(72,-5,5,20,24);

          drawWireRight(200,-5,5,20,24);

          function drawWireLeft(startX,startY,lineWidth,lineHeight,endY){

              ctx.strokeStyle=color;

              ctx.beginPath();

              ctx.moveTo(startX,startY);

              ctx.lineTo(startX+lineHeight,endY);

              ctx.lineWidth = lineWidth;

              ctx.stroke();

          }

          function drawWireRight(startX,startY,lineWidth,lineHeight,endY){

              ctx.strokeStyle=color;

              ctx.beginPath();

              ctx.moveTo(startX,startY);

              ctx.lineTo(startX-lineHeight,endY);

              ctx.lineWidth = lineWidth;

              ctx.stroke();

          }

          //身体

          drawBody(48,107,232,255,20);

          function drawBody(startX,startY,endX,endY,radius){

              ctx.fillStyle=color;

              ctx.beginPath();

              ctx.moveTo(startX,startY);

              ctx.lineTo(endX,startY);

              ctx.lineTo(endX,endY-radius);

              ctx.arcTo(endX,endY,endX-radius,endY,radius);

              ctx.lineTo(startX+radius,endY);

              ctx.arcTo(startX,endY,startX,endY-radius,radius);

              ctx.lineTo(startX,startY);

              ctx.fill();

              ctx.closePath();

          }

          //腿

          drawLeg(82,255,300,20);

          drawLeg(152,255,300,20);

          function drawLeg(startX,startY,endY,radius){

              var endX = startX + radius*2;

              ctx.fillStyle=color;

              ctx.fillRect(startX,startY,radius*2,endY-startY);

              ctx.beginPath();

              ctx.arc(endX-radius,endY,radius,0,Math.PI);

              ctx.fill();

          }

          //手臂

          drawHand(20,110,210);

          drawHand(260,110,210);

          function drawHand(startX,startY,endY){

              ctx.strokeStyle=color;

              ctx.beginPath();

              ctx.moveTo(startX,startY);

              ctx.lineTo(startX,endY);

              ctx.lineCap = "round";

              ctx.lineWidth = 40;

              ctx.stroke();

          }

          ctx.restore();//把当前画布返回(调整)到上一个save()状态之前

      }

  </script>

</body>

</html>

效果如图：

用canvas绘制android机器人的更多相关文章

  1. Android -- 自定义View小Demo，关于Rect绘制Android机器人（一）

    1,关于Rect和RectF类的区别以前一直没有去关注它,刚刚了解了一下才知道都是用来确定矩形的区域,不过Rect是int类型的坐标而RectF是float类型的坐标,所以说RectF要更加精确.现在 ...

  2. android用canvas绘制两种波纹效果

     波形效果有几种不同的呈现形式,比如从中间向四周散开的波形,也就是熟知的水涟漪:还有上下波动的曲线,像五线谱等.英文中可以称作Wave或者Ripple,所以暂且叫它们WaveView.WaveLayo ...

  3. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  4. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  5. Android自定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  6. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  7. android 开发 View _12_ 用Canvas 绘制一张图片（博客中演示用Canvas画验证码图片）

    package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; impo ...

  8. 第167天：canvas绘制柱状图

    canvas绘制柱状图 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. 安卓使用Canvas绘制工作日程表

    有一个项目要使用工作表,选择使用canvas来绘制.实现显示工作日程的选择,可点击加入和取消,效果图:http://jwzhangjie.com/workplan.gif 自己定义控件FormView ...

随机推荐

  1. Problem G: 圆周率

    Problem G: 圆周率 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 155  Solved: 99[Submit][Status][Web Bo ...

  2. SQL 值得记住的点

    概要 记录在学习过程中,遇到的不懂且需要掌握的知识点.主要基于 MySQL.   汇总      replace 函数      删除重复      取子串 substr      项连接      ...

  3. 快速排序算法思路分析和C++源代码(递归和非递归)

    快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用,因此很多软件公司的笔试面试喜欢考这个. 快速排序是C.R.A.Hoar ...

  4. 浏览器 DNS缓存与DNS prefetch （DNS预解析）

    浏览器 DNS缓存 浏览器DNS缓存的时间跟DNS服务器返回的TTL值无关. 注:TTL(Time-To-Live),就是一条域名解析记录在DNS服务器中的存留时间. 浏览器在获取网站域名的实际IP地 ...

  5. MySQL 5.7 在线启用和关闭GTID

    1.相关基础 MySQL 5.7.6之后GTID_MODE提供了两个新的选项分别为ON_PERMISSIVE和OFF_PERMISSIVEOFF_PERMISSIVE:不产生GTID事务, Slave ...

  6. Java 窗体的基本操作语句 JFrame

    package com.swift; import java.awt.Color; import java.awt.GridLayout; import java.util.Random; impor ...

  7. 【搜索】【入门】洛谷P1036 选数

    题目描述 已知 n个整数x1​,x2​,…,xn​,以及1个整数k(k<n).从nn个整数中任选kk个整数相加,可分别得到一系列的和. 例如当n=4,k=3,4个整数分别为3,7,12,19时, ...

  8. linux 下备份mysql数据库

    今天老板让备份数据库没办法自己折腾吧,下面把折腾的结果总结总结. 数据库备份思路: 1.编写脚本 2.执行脚本  哈哈,是不是很简单,打开冰箱,放入大象,关上.下面我是具体操作. 一.编写脚本 1.设 ...

  9. ELK详细安装部署

    一.前言 ​ 日志主要包括系统日志和应用程序日志,运维和开发人员可以通过日志了解服务器中软硬件的信息,检查应用程序或系统的故障,了解故障出现的原因,以便解决问题.分析日志可以更清楚的了解服务器的状态和 ...

  10. ubuntu crontab设置定时任务

    ubuntu 设置定时任务   crontab -l  #查看详情crontab -e #设置定时任务 * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用* ...