遥控小车之：HTML5+ 虚拟摇杆

最新推荐文章于 2024-05-15 20:03:54 发布

Tianzei

最新推荐文章于 2024-05-15 20:03:54 发布

阅读量1w

点赞数 3

分类专栏：遥控小车文章标签： html5 android应用树莓派摇杆圆与直线的交点

本文链接：https://blog.csdn.net/github_36474971/article/details/52891951

版权

之前用做了一台树莓派小车，然后写了个简易的遥控器，现在觉得太蹩脚，不能调整转速，特来做一个手机端的小车遥控器：

用C#写的一个winform遥控器，支持方向键或WSAD或鼠标点击控制
接下来摆在我面前的问题就是选择什么语言进行编写咯，我首先考虑了JAVA，首先我从来没写过JAVA的程序，而且IDE装起来很麻烦，而且还是英文的，那更加完全不懂了。然后是C#，很多人都不知道C#可以写Android应用。其实是可以的，但是Android Studio我上次用着卡卡的，印象不是很好，不想用。那还剩下什么选择呢？还有一个：HTML5。
好了我去装了个Hbuilder：
Hbuilder logo
中文的，很好用，问题在于我也从来没用过javascript，不过这是小问题啦。
打开Hbuilder，设置一些护眼什么的，然后点左上角[文件]-[新建]-[移动APP]。然后我选了个模板：
Hbuilder自带的移动APP模板
嗯，这就是这个程序在手机上执行的时候的样子。然后我模仿着加了一个列表项到index.html里面去：

<li id="plus/controller.html" onclick="clicked(this.id);">
    <span class="item">Controller
        <div class="chs">小车遥控器</div>
    </span>
</li>

好的，于是这个列表就加了一个选项了。：
被添加选项
继续，在plus文件夹里边添加一个controller.html，这就是我们的摇杆所存在的页面。在这个页面上，我们需要一个canvas标签和一个js脚本共同来绘制摇杆：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="HandheldFriendly" content="true" />
        <meta