为什么我的HTML5 / JS应用程序不能在我的iPhone上运行
Why Wont My HTML5/JS App Work On My iPhone?
伙计们怎么样?
最近,在这个网站的帮助下,我学会了如何通过单击按钮在 HTML5 画布上绘制一个矩形......这不是问题:)这是问题...不幸的是,当我尝试在 iPhone 上使用它时,它根本不起作用......为什么:(?
这是我的代码:
JAVASCRIPT:
// "Rectangle" Button
function rect()
{
var canvas = document.getElementById('canvasSignature'),
ctx = canvas.getContext('2d'),
rect = {},
drag = false;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}
function mouseUp() {
drag = false;
}
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY ;
draw();
}
}
function draw() {
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();
}
HTML5:
<div id="canvasDiv">
<canvas id="canvasSignature" width="580px" height="788px" style="border:2px solid #000; background: #FFF;"></canvas>
</div>
<div id="rect">
<p><button onclick="rect();">Rectangle</button></p>
</div>
任何帮助将不胜感激:)
首先你的代码有误你用这个星星
rect() {
并仅在脚本末尾关闭它
在触摸设备上,我认为您需要使用触摸*事件
像这样的东西
var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false;
function init() {
canvas.addEventListener("touchstart", touchHandler, false);
canvas.addEventListener("touchmove", touchHandler, false);
canvas.addEventListener("touchend", touchHandler, false);
}
function touchHandler(event) {
if (event.targetTouches.length == 1) { //one finger touche
var touch = event.targetTouches[0];
if (event.type == "touchstart") {
rect.startX = touch.pageX;
rect.startY = touch.pageY;
drag = true;
} else if (event.type == "touchmove") {
if (drag) {
rect.w = touch.pageX - rect.startX;
rect.h = touch.pageY - rect.startY ;
draw();
}
} else if (event.type == "touchend" || event.type == "touchcancel") {
drag = false;
}
}
}
function draw() {
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 如何让iPhone用户在我的网站上观看带字幕的视频
- 为什么我的HTML5 / JS应用程序不能在我的iPhone上运行
- iPhone设备黑色屏幕在我的jQuery手机Gap应用程序导航中闪烁
- 为什么 $.post 似乎不能在我的网站上的 iPad/iPhone 上运行
- iPhone不会让我在我的视差网站上向下滑动.Toio 很多 Javascript
- 如何在我的网页上为iPhone用户创建一个注释,说明有一个应用程序
- 我的iPhone 5s无法使用钛合金进行水平旋转
- 如何在我的iphone模拟器中查看嵌入式web应用程序的启动日志
- 为什么我的webGL应用程序在iPhone上查看时背景颜色不同
- 在我的iPhone应用程序中使用JavaScript
- 如何从html javascript iphone sdk对齐我的webview的文本
- 为什么我的图表在IPhone/IPad上有效,但在Android上无效
- 为什么我的JSON.parse()在iPhone上失败了?
- 我想为我越狱的iPhone做一个iWidget.我'我的HTML文件有问题
- 如何获得注册文件的url为我的iphone应用程序
- 为什么我的网站的单选按钮不能在iPhone/iPad上点击?
- 用我的iphone应用程序打开文件有问题
- 如何检测用户是从Android还是iPhone访问我的网站
- 我如何使我的画布区域适合iphone浏览器