用canvas绘制android机器人
直接上代码:
<!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机器人的更多相关文章
- Android -- 自定义View小Demo,关于Rect绘制Android机器人(一)
1,关于Rect和RectF类的区别以前一直没有去关注它,刚刚了解了一下才知道都是用来确定矩形的区域,不过Rect是int类型的坐标而RectF是float类型的坐标,所以说RectF要更加精确.现在 ...
- android用canvas绘制两种波纹效果
波形效果有几种不同的呈现形式,比如从中间向四周散开的波形,也就是熟知的水涟漪:还有上下波动的曲线,像五线谱等.英文中可以称作Wave或者Ripple,所以暂且叫它们WaveView.WaveLayo ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- 【朝花夕拾】Android自定义View篇之(三)Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
- android 开发 View _12_ 用Canvas 绘制一张图片(博客中演示用Canvas画验证码图片)
package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; impo ...
- 第167天:canvas绘制柱状图
canvas绘制柱状图 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 安卓使用Canvas绘制工作日程表
有一个项目要使用工作表,选择使用canvas来绘制.实现显示工作日程的选择,可点击加入和取消,效果图:http://jwzhangjie.com/workplan.gif 自己定义控件FormView ...
随机推荐
- linux用命令行运行matlab的.mat文件
入m文件所在目录后,运行 $ matlab -nodesktop -nosplash -r matlabfile 只用文件名matlabfile,不能添加.m
- S运算符&&和|| 及其优先级
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回aa || b : 将a, b转换为Boolean类型, 再执行逻辑或, tru ...
- SQLyog点击“测试连接”后,报2058错误
问题:安装MySQL和SQLyog之后,在SQLyog中点击“测试连接”时,报2058错误. 解决:这里要确定两个问题:1 MySQL是否配置了环境变量:2 如果配置了MySQL环境变量,那么需要在c ...
- 01_13_JSP编译指令
01_13_JSP编译指令 1. Directive Directive(编译指令)相当于在编译期间的命令 格式: <%@Directive 属性=”属性值”%> 常见的Directive ...
- SpringMVC解决前台传入的数组或集合类型数据
1前台处理如下: $.ajax({ url:"saveMapInfo", type:"POST", dataType:"json", con ...
- linux配置邮箱服务
配置邮箱服务Linux常见的邮箱客户端是mail或mutt:服务端有sendmail服务(centos 5).postfix服务(centos 6).这里我们不使用本地的邮件服务,而是使用本地的邮件客 ...
- Java Web 基础(一) 基于TCP的Socket网络编程
一.Socket简单介绍 Socket通信作为Java网络通讯的基础内容,集中了异常.I/O流模式等众多知识点.学习Socket通信,既能够了解真正的网络通讯原理,也能够增强对I/O流模式的理解. 1 ...
- 学习Pytbon第三天,用户输入
_username ='dream' #定义用户名 _password ='dream123'#定义用户密码username = input("username:")#请输入用户名 ...
- hdu 1257最少拦截系统
最少拦截系统 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高度.某天,雷达捕捉到敌国的 ...
- tensorboard页面显示No dashboards are active for current data set 问题win10系统
如果问题如上所示,可以试下如下方法: 在文件夹中找到你的logs文件, 在空白处按住“shift”键,右键鼠标(注意鼠标不要选中任何文件),点击“Powershell”打开win10powershel ...