html画布线,HTML5画布绘制一条线，其方向和尺寸变化

首先，我不是HTML5的专业人士。几天前我开始用HTML5做一些事情。其次，对我的英语感到抱歉，我不是很擅长，可能会犯一些错误。HTML5画布绘制一条线，其方向和尺寸变化

这里是我的问题......

我可以得出两个鼠标点击一条线，线从第一点击点开始，并在第二次点击点结束。

但是我想创建一个从第一个点击点开始的行，根据鼠标位置改变它的方向和尺寸，然后在第二个点击点结束。 (就像Android中的图形密码系统一样)

这可能吗？

我发现了一些代码，可以用两次鼠标点击一次只画一条线，我改了一下，自己添加了一些代码。这是我的最终代码：

body {

margin: 0px;

padding: 0px;

}

#myCanvas {

border: 1px solid #9C9898;

}

$(function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var point1 = new Array();

point1['x'] = false;

point1['y'] = false;

var point2 = new Array();

point2['x'] = false;

point2['y'] = false;

$(document).click(function(event){

if (false === point1['x'] || false === point1['y']) {

var posX1 = event.pageX;

var posY1 = event.pageY;

point1['x'] = posX1;

point1['y'] = posY1;

}

else if (false === point2['x'] || false === point2['y']) {

var posX2 = event.pageX;

var posY2 = event.pageY;

point2['x'] = posX2;

point2['y'] = posY2;

console.log("second");

context.moveTo(point1['x'], point1['y']);

context.lineTo(point2['x'], point2['y']);

context.stroke();

point1['x'] = point2['x'];

point1['y'] = point2['y'];

point2['x'] = false;

point2['y'] = false;

}

});

});

2012-06-12

mikrobik

+0

如何将线知道改变方向？你是指第二点的曲线吗？ –

+0

对不起，双重评论，只是看你的Android锁屏说明。无论如何，您可以在行动中发布该示例的视频或屏幕截图？有很多自定义的android锁屏，所以我不知道你指的是哪一个。 –

+0

我找不到关于它的视频，对不起。我试图解释这一点：http://zapp5.staticworld.net/howto/graphics/184659-android29_180.jpg 用户从一个点开始，然后将他/她的手移动到不同的点，在这两个点之间出现一条线。当用户将他/她的手移动到不同的点时，起始点保持不变并且线的方向改变。 –