用html5做一个遥控车应用。
好了，我要安装一个Hbuilder:
中文，非常好用，但问题是我没用过javascript，不过这是个小问题。？
打开Hbuilder，设置一些护眼什么的，然后点击左上角的[文件]-[新建]-[手机APP]。然后我选了一个模板:？
嗯，这是这个程序在手机上执行时的样子。然后我模仿，给index.html加了一个列表项:
& ltLi id = " plus/controller . html " onclick = " clicked(this . id)；"& gt
& ltspan class="item " >控制器& ltdiv class="chs " >汽车遥控
& lt/span>。& lt/李& gt12345
好了，这个列表中增加了一个选项。:?
继续，在加号文件夹中添加一个controller.html，这就是我们的操纵杆所在的页面。在这个页面上，我们需要一个画布标签和一个js脚本来绘制操纵杆:
& lt！DOCTYPE html & gt& lthtml & gt
& lthead & gt
& ltmeta charset="UTF-8 " >
& ltmeta name = " viewport " content = " initial-scale = 1.0，maximum-scale=1.0，user-scalable = no "/& gt；
& ltmeta name = " handled friendly " content = " true "/& gt。
& ltmeta name = " apple-mobile-we b-app-capable " content = " yes "/& gt；
& lt！-& lt；meta name = " mobile optimized " content = " 320 "/& gt。-& gt；
& lttitle & gt汽车遥控
& ltscript type = " text/JavaScript " src = "../js/common . js " & gt；& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv class="leftjoystick " >
& ltcanvas id= "操纵杆" width = " 120 " height = " 120 " >。& lt/canvas & gt；
& lt脚本src= "../js/joystick . js " & gt；& lt/script & gt；
& lt/div & gt；
& lt/body & gt；& lt/html & gt；12345678910111213141516171819
嗯，在我开始写代码画摇杆之前，我先做了两张图，这样在画摇杆的时候可以更省力，效果更好。。？
然后花了一整天的时间熟悉javascript。我敲打出js代码来控制摇杆。放代码:
var Ji = new Image()；//内摇杆图片var jo = new Image()；//外摇杆图片var摇杆=文档。getElementByid('摇杆')；//artboard var josize = joystick . height；//外部摇杆尺寸var jisize = josize * 0.6//内摇杆大小var centex = josize/2；//摇杆中心的X坐标var centerY = josize/2；//摇杆中心的y坐标window.addeventlistener ('load '，load，false)；var JC = joystack . get context(' 2d ')；//Canvas//摇杆头应该移动到的位置var jx = 0，
jy = 0；//执行这两个函数ji.onload = function() {
jc.drawImage(ji，centerX - jisize / 2，centerY - jisize / 2，jisize，jisize)；//第一次画内摇杆}
jo.onload = function() {
jc.drawImage(jo，centerX - josize / 2，centerY - josize / 2，josize，josize)；
}//画图函数(画图时用户观察到摇杆移动，故命名为move)函数move() {
JC . clear rect(centex-josize/2，centerY - josize / 2，josize，josize)；//清空画板
jc.drawImage(jo，centerX - josize / 2，centerY - josize / 2，josize，josize)；//绘制底部
jc.drawImage(ji，centex-jisize/2+JX，centerY - jisize / 2 + jy，jisize，jisize)；//绘制摇杆头
requestAnimationFrame(move)；//下一张图纸}
ji.src = '../img/joystickin . png '；//加载图片jo.src = '../img/joystickout . png '；//加载图片//加载页面时执行此函数{
document . addevent listener(' touch start '，touch，false)；
document . addevent listener(' touch move '，touch，false)；
document . addevent listener(' touch end '，touch，false)；//加载时先画摇杆。
move()；//var effective finger = 0；//当前有效的手指
//触摸事件触发功能
功能触摸(事件){
var event = event | | window.eventvar oInp = document . getelementbyid(" InP ")；switch(event . type){ case " touch start "://？//判断是否击中摇杆头。
// ?if(math . ABS(event . touches[event . identifier])。clientX-100-JX)& lt；= 40 & amp& amp
// ?math . ABS(event . touches[event . identifier])。clientY-100-jy)& lt；= 40) {
// ?effective finger = event . identifier；//如果是，则将该手指设置为有效手指。
// ?}//不知道为什么这个不行，也拿不到event.identifier。
打破；Case“感动”://手指离开的时候。
//如果手指离开，就把内摇杆放在中间。
JX = 0；
jy = 0；打破；Case "touchmove"://当手指移动时:
//触摸点是否在摇杆上
if(math . sqrt(math . pow(event . touches[effective finger])。clientX-centex，2)+math . pow(event . touches[effective finger])。clientY - centerY，2))& lt；=
josize / 2 - jisize / 2) {
JX = event . touches[effective finger]。clientX-centex；
jy = event . touches[effective finger]。以客户为中心；
}否则
//否则，计算摇杆的最近位置。
{ var x = event . touches[effective finger]。clientX，
y = event . touches[effective finger]。客户，
r = josize/2-jisize/2；var ans=GetPoint(centerX，centerY，r，centerX，centerY，x，y)；//圆和直线有两个交点。计算离手指最近的交点。
if(math . sqrt((ans[0]-x)*(ans[0]-x)+(ans[1]-y)*(ans[1]-y))& lt；math . sqrt((ans[2]-x)*(ans[2]-x)+(ans[3]-y)*(ans[3]-y)))
{
JX = ans[0]-centex；jy = ans[1]-centerY；
}否则
{
JX = ans[2]-centex；jy = ans[3]-centerY；
}
}//move()；
event . prevent default()；//防止页面滑动，取消默认事件。
打破；
}
}
requestAnimationFrame(move)；//开始画}//计算圆和直线的交点(这一块好难)函数get point (CX，CY，R，STX，STY，EDX，EDY) {
//(x-cx)^2+(y-cy)^2=r^2
//y=k*x+b
var k =(edy-sty)/(EDX-stx)；var b = edy-k * EDX；//(1+k^2)*x^2-x *(2 * CX-2 * k *(b-cy))+CX * CX+(b-cy)*(b-cy)-r * r = 0
var x1，y1，x2，y2；var c = CX * CX+(b-cy)*(b-cy)-r * r；var a =(1+k * k)；var b 1 =(2 * CX-2 * k *(b-cy))；var tmp = math . sqrt(b 1 * b 1-4 * a * c)；
x 1 =(b 1+tmp)/(2 * a)；
y 1 = k * x 1+b；
x2 =(b 1-tmp)/(2 * a)；
y2 = k * x2+b；return [x1，y1，x2，y2]；
}123456789101112131415161718192021222324252627282930313233343536373 8394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 9697989910010110210310410510610710810911011116543 8+02113114115116
这段代码的思想是，如果手指在底座上，那么移动手指下面的摇杆头，如果手指在底座外面，那么移动摇杆到底座最靠近手指的部分。嗯，就是这样。