直接上代码:

<!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. 【BZOJ1030】[JSOI2007] 文本生成器(AC自动机上跑DP)

    点此看题面 大致题意: 给你\(N\)个字符串(只含大写字母),要你求出有多少个由\(M\)个大写字母构成的字符串含有这\(N\)个字符串中的至少一个. \(AC\)自动机 看到题目,应该比较容易想到 ...

  2. python_39_变量补充

    #使用eval()函数计算字符串中的有效表达式,并返回结果 a='1+3' print(eval(a)) b='''{ '闵行': { '人民广场': { '炸鸡店': {}, }, } ''' pr ...

  3. facebook的infer检测工具的安装

    缘由 由于公司产出代码的时候会使用静态扫描工具检测代码的质量,所以自己就想动手尝试一番infer整个的使用方式和使用效果,便动手安装了infer,结果安装过程中遇见太多的坑,导致很多时候都安装失败,这 ...

  4. Tomcat:javax.management.InstanceNotFoundException: com.alibaba.druid:type=DruidDataSourceStat异常

    问题: 在关闭tomcat时: Tomat报出一下异常:ERROR [com.alibaba.druid.stat.DruidDataSourceStatManager] – unregister m ...

  5. python 时间加8小时后的时间

    eta_temp = one['arrival'].encode('utf-8') fd = datetime.datetime.strptime(eta_temp, "%Y-%m-%dT% ...

  6. 项目实战8.1—tomcat企业级Web应用服务器配置与会话保持

    分类: Linux架构篇   tomcat企业级Web应用服务器配置与实战 环境背景:公司业务经过长期发展,有了很大突破,已经实现盈利,现公司要求加强技术架构应用功能和安全性以及开始向企业应用.移动A ...

  7. 【PHP】Thinkphp 七牛云API对接

    访问一个网站,图片的流量占的比例是非常高的!在你的服务器硬盘上,图片占的容量也是非常高的. 如果要搞一个图片非常多,用户量又很庞大的网站,那么,得花多少钱烧在服务器上? 这种时候,当然要用第三方图片存 ...

  8. 07.VUE学习之解决phpstorm不识别ECMASCRIPT6语法的问题

    此时已经识别:

  9. python爬虫的基本思路

    爬虫:请求网站并提取数据的自动化程序. 流程: 发送请求 -> 获取数据 -> 解析数据 -> 存储数据

  10. 学习pytho第五天 循环

    age_of_Bob = 56#定义年龄 count = 0#头部计数 while True:#while循环 if count ==3:#如果次数==3: break#退出 guess_age = ...