使用html5 canvas 绘制Android机器人

最新推荐文章于 2021-07-14 11:45:05 发布
最新推荐文章于 2021-07-14 11:45:05 发布
阅读量3.3k 收藏 10
点赞数
分类专栏： WEB前端 文章标签： html5 canvas android 机器人
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Robocop_Mao/article/details/48751577
版权

练习使用Html5 canvas 绘制Android机器人。

要点：当对画布进行变换的时候，需要使用 save() 方法 和 restore() 方法，它们应该成对使用，且 restore() 方法不能比 save() 方法多。我们只需要每次在画布变换前使用 save() 方法保存其初始状态，之后使用 restore() 方法恢复到上一次保存的状态即可。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #canvas {
                border: 1px solid #000;
                margin: 0 auto;
                display: block;
            }
            #show {
                position: fixed;
                top: 10px;
                left: 10px;
            }
        </style>
    </head>
    <body>
        <canvas width="1000" height="1024" id="canvas" onmousemove="go(event)" onmouseout="out()">
            您的浏览器不支持canvas，请升级你的浏览器！
        </canvas>
        <div id="show"></div>
    </body>
    <script type="text/javascript">

        //获得坐标，便于查找
        var show=document.getElementById("show");
        document.getElementById("show").innerHTML='ds'
        function go(e){
            var x=e.clientX;
            var y=e.clientY;
            document.getElementById("show").innerHTML=x+" "+y;
        }
        function out(){
            show.innerHTML="";
        }

        //获得canvas对象
        var oCanvas = document.getElementById('canvas');
        var ctx = oCanvas.getContext('2d');

        //头
        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.arc(500, 300, 137, Math.PI * (-18 / 180), Math.PI * (-175 / 180), 1);
        ctx.fill();
        ctx.closePath();

        //身子
        ctx.beginPath();
        ctx.restore();
        ctx.fillStyle = '#99FE00';
        ctx.save();
        ctx.rotate(-7 * Math.PI / 180);
        ctx.fillRect(325, 350, 268, 200);
        ctx.closePath();

        //左眼
        ctx.restore();
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(430, 230, 16, 0, Math.PI * 2, 1);
        ctx.fill();
        ctx.closePath();

        //右眼
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(535, 220, 16, 0, Math.PI * 2, 1);
        ctx.fill();
        ctx.closePath();

        //左腿
        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.fillRect(460, 470, 48, 100);
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.moveTo(483, 562);
        ctx.arc(484, 562, 25, Math.PI * (15 / 180), Math.PI * (165 / 180), 0);
        ctx.fill();
        ctx.closePath();

        //右腿
        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.fillRect(550, 450, 48, 120);
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.moveTo(573, 562);
        ctx.arc(574, 562, 25, Math.PI * (15 / 180), Math.PI * (165 / 180), 0);
        ctx.fill();
        ctx.closePath();

        //左手
        ctx.save();
        ctx.rotate(55 * Math.PI / 180);
        ctx.translate(145, -430);

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.moveTo(340, 355);
        ctx.arc(340, 355, 24, 0, Math.PI, 1);
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.fillRect(316, 355, 48, 100);
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.moveTo(340, 450);
        ctx.arc(340, 450, 24, 0, Math.PI, 0);
        ctx.fill();
        ctx.closePath();

        //右手
        ctx.restore();
        ctx.save();
        ctx.rotate(30 * Math.PI / 180);
        ctx.translate(370, -545);

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.moveTo(340, 355);
        ctx.arc(340, 355, 24, 0, Math.PI, 1);
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.fillRect(316, 355, 48, 100);
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.moveTo(340, 450);
        ctx.arc(340, 450, 24, 0, Math.PI, 0);
        ctx.fill();
        ctx.closePath();


        //左触角
        ctx.restore();
        ctx.beginPath();
        ctx.strokeStyle = "#99FE00";
        ctx.moveTo(430,190);
        ctx.lineTo(390,140);
        ctx.lineWidth = 10;
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.arc(390, 140, 5, 0, Math.PI * 2, 1);
        ctx.fill();
        ctx.closePath();

        //左触角
        ctx.beginPath();
        ctx.strokeStyle = "#99FE00";
        ctx.moveTo(530,180);
        ctx.lineTo(550,120);
        ctx.lineWidth = 10;
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#99FE00';
        ctx.arc(550, 120, 5, 0, Math.PI * 2, 1);
        ctx.fill();
        ctx.closePath();

        //滑板
        ctx.beginPath();
        ctx.fillStyle = '#000';
        ctx.fillRect(400, 584, 300, 40);
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#000';
        ctx.arc(400, 604, 20, 0, Math.PI * 2, 1);
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#000';
        ctx.arc(700, 604, 20, 0, Math.PI * 2, 1);
        ctx.fill();
        ctx.closePath();

        //滑板轮
        ctx.beginPath();
        ctx.fillStyle = '#000';
        ctx.arc(450, 658, 20, 0, Math.PI * 2, 1);
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = '#000';
        ctx.arc(640, 658, 20, 0, Math.PI * 2, 1);
        ctx.fill();
        ctx.closePath();

        //Android渐变文字
        ctx.beginPath();
        ctx.font = '60px Arial';
        var grd=ctx.createLinearGradient(400, 0, 600, 0);
        grd.addColorStop(0,"black");
        grd.addColorStop(0.3,"magenta");
        grd.addColorStop(0.5,"blue");
        grd.addColorStop(0.6,"green");
        grd.addColorStop(0.8,"yellow");
        grd.addColorStop(1,"red");
        ctx.fillStyle=grd;
        ctx.fillText('Android', 400, 750);
        ctx.closePath();
    </script>
    </html>

下面是代码效果：
这里写图片描述

Robocop_Mao
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web 利用纯html和css画出一个android机器人
Sword Art Online
02-12 1339
Android机器人 这个小项目是为了熟悉border-radius 圆角边框 参考文档 border-radius 源代码 <style> .robot{ width: 500px; height: 550px; border: 1px solid red; margin: 30px aut...
利用HTML5开发Android笔记
Dream It Possible
07-19 7023
资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 （上）包括Android设备多分辨率的问题，Android中构建HTML5应用程序基础 （中）包括Android与JS之间的互动，Android处理JS的警告对话框等，Android中
html5画安卓机器人,HTML5用户笔画形状检测机器人
weixin_34379608的博客
06-14 211
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = Snap('#svg-canvas');var card = $('#svg-canvas');var intro = $('.intro')var trainedData = [];var centerDot;var drawBox;var drawing = [];var drawPa...
Canvas类和Paint的绘制机器人
枫轻芸淡
08-19 1556
canvas.drawRect(RectF,Paint)方法用于画矩形，第一个参数为图形显示区域，第二个参数为画笔，设置好图形显示区域Rect和画笔Paint后，即可画图；     canvas.drawRoundRect(RectF, float, float, Paint) 方法用于画圆角矩形，第一个参数为图形显示区域，第二个参数和第三个参数分别是水平圆角半径和垂直圆角半径。
Canvas详解及代码绘制安卓机器人
05-13
Canvas详解及代码绘制安卓机器人
使用Canvas类绘制android机器人
08-17
本文将深入探讨如何利用Canvas类来绘制一个Android机器人，从而理解其基本概念、方法以及如何实现复杂的图形绘制。 首先，Canvas类是Android系统提供的一个用于在内存中的Bitmap上进行绘制的接口。它可以用来画线、...
Android绘制机器人小实例
08-28
通过以上这些知识点的组合，我们可以创建出一个简单的Android机器人图形。这个实例不仅展示了如何使用基本的2D绘图API，还演示了如何将自定义视图与布局结合，为应用程序提供个性化的视觉效果。对于初学者来说，这是...
Android中使用Canvas和Paint绘制一个安卓机器人示例代码
01-10
5. **绘制身体和四肢**：使用drawRect()或drawPath()方法绘制机器人的身体和四肢。路径绘制（drawPath()）可以用于创建更复杂的形状，如手臂和腿部的曲线。 6. **绘制眼睛、嘴巴等细节**：利用drawCircle()或...
html制作机器人,HTML5随机机器人生成器和爆炸拆解动画
weixin_35698069的博客
06-18 352
CSS语言：CSSSCSS确定html {box-sizing: border-box;}*,*::before,*::after {box-sizing: inherit;padding: 0;margin: 0;}body {display: flex;height: 100vh;font-family: Montserrat, sans-serif;}.minifigure {positio...
canvas效果案例：安卓机器人
07-10 235
利用之前所学的线的样式及上节的弧形画一个简单的机器人吧！ // 开始新的路径 ctx.beginPath(); // 描边色 ctx.strokeStyle = 'green'; // 线宽 ctx.lineWidth = 40; // 左边手 // 线帽 ctx.lineCap = 'round'; // 下笔 ctx.moveTo(120, 160); // 起笔...
基于HTML5与WebGL的机器人3D环境下的运动学仿真 (2014年)
05-25
利用三维计算机辅助设计软件Remo3D建立机器人各连杆的三维模型,用标准COLLADA来描述机器人各连杆之间的相互连接关系,采用D- H法建立了5自由度机械手的运动方程,通过齐次矩阵的变换解决了顺逆运动学问题.利用HTML5语言和WebGL图形函数库的机器人三维仿真系统实现机器人的实时图形仿真,且无需安装程序可异地同步获取.另外,应用程序基于开放标准,可以在任何电脑或智能设备的现代浏览器上运行.
用canvas绘制android机器人
weixin_30347335的博客
12-07 215
直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用canvas绘制android机器人</title> </head> <body> <canvas...
html5行走的机器人,html5 css3实例教程 一款html5和css3实现的小机器人走路动画_html5教程技巧...
weixin_42310348的博客
06-26 251
html {-moz-box-sizing: border-box;box-sizing: border-box;}*, *:before, *:after {-moz-box-sizing: inherit;box-sizing: inherit;}html,body {height:100%;margin: 0;font: 40px/40px "Helvetica Neue";font-wei...
H5绘制Android机器人
小马过河
09-25 825
H5提供了很多绘画功能，让页面更加炫酷。这也是H5很受欢迎的原因之一。下面是绘制Android机器人全部代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;
android 简易涂鸦板,canvas实现的简易涂鸦板效果
weixin_28745309的博客
05-31 520
用canvas实现的简易涂鸦板效果，用鼠标点击在画布上随意涂鸦涂鸦*{margin: 0;padding: 0;}#canvas1{box-shadow: 0 5px 40px black;}var canvas = document.getElementById('canvas1');var context = canvas.getContext('2d')canvas.onmousedown ...
网站建设中canvas效果------会跳舞的机器人
SeaSunExpect的博客
06-03 417
效果预览 创建robot类 机器人构造函数 constructor(color, light, size, x, y, struct) { this.x = x; this.points = []; this.links = []; this.frame = 0; this.dir = 1; this.size = size; this.color = Mat...
【css】使用css画机器人
夜雨Gecer的博客
09-06 822
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { display: flex; ...
安卓Html5编程（一）
axbbest的博客
06-06 688
最近复习html5+css3的编程，发现很多知识都有点模糊，哎，突然感悟好记性不如烂笔头的真理 。废话不多说，开始今天的学习之路：安卓端加载html5的配置 首先配置布局为WebView。 web.getSettings().setJavaScriptEnabled(true);//此处打开加载js脚本，如果不设置会直接忽略js脚本而不执行。 web.setWebChromeClient(new W
html5实现安卓的手写功能,html5 canvas手写字代码(兼容手机端)(示例代码)
weixin_39904116的博客
07-14 292
html5 canvas手写字代码(兼容手机端)画板实验清 空生成图片var canvas,board,img;canvas = document.getElementById(‘myCanvas‘);img= document.getElementById(‘img‘);canvas.height = 300;canvas.width = 300;board = canvas.getContex...
HTML5使用canvas绘制警示牌
最新发布
03-26
HTML5中的canvas元素可以用于绘制各种图形，包括警示牌。下面是使用canvas绘制警示牌的基本步骤： 1. 创建canvas元素： 在HTML文件中，使用`<canvas>`标签创建一个canvas元素，并设置宽度和高度。 ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值