ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用して、mouse_javascript スキルで線を描画するためのサンプル コードを実装します。

JavaScript を使用して、mouse_javascript スキルで線を描画するためのサンプル コードを実装します。

WBOY
リリース: 2016-05-16 16:39:16
オリジナル
1808 人が閲覧しました

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled 1</title>

<style type="text/css">

.style1 {

  font-size: x-small;

}

</style>

<script type="text/javascript">

/**

  画点

*/ 

function makedot(x, y){

 pointDiv = "<div style='height:1px;position:absolute;left:" + x +

   "px;top:" + y + "px;width:1px;background:#f00;overflow:hidden'></div>";

 return pointDiv;

}

/**

 根据两点坐标画直线。

*/

 

function line(x1,y1,x2,y2){

 var slope; //斜率

 var direction;//坐标运动方向

 var tx = x2 - x1;

 var ty = y2 - y1;

 if(tx == 0 && ty == 0)return;

 var points = "";

 var axis;//坐标轴上的坐标

 if(Math.abs(tx) >= Math.abs(ty)){//在x轴上移动

   direction = tx > 0 &#63; 1 : -1;

   tx = Math.abs(tx);

   slope = ty / tx;

   axis = x1;

   for(i = 0; i < tx; i ++){

     points += makedot(axis, y1 + i * slope);

     axis += direction;

   }

     

 }else{//在y轴上移动

   direction = ty > 0 &#63; 1 : -1;

   ty = Math.abs(ty);

   slope = tx / ty;

   axis = y1; 

   for(i = 0; i < ty; i ++){

     points += makedot(x1 + i * slope, axis);

     axis += direction;

   }

 }

 var container = document.getElementById("container");

 container.innerHTML += points;

}

var oldPoint = null;

//获取鼠标位置

function mousePosition(ev){

  ev = ev || window.event;

  if(ev.pageX || ev.pageY){

    return {x:ev.pageX, y:ev.pageY};

  }

  var doc = document.documentElement, body = document.body;

  var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);

  var pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);   

  return {x:pageX, y:pageY};

}

 

function recordPoint(ev){

   

  var point = mousePosition(ev);

  if(oldPoint != null){

    line(oldPoint.x, oldPoint.y, point.x, point.y);

  }

  oldPoint = point;

}

</script>

</head>

 

<body>

<div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onclick="recordPoint(event);">

   

</div>

<script type="text/javascript">

  //line(19,19,22,300);

</script>

</body>

</html>

ログイン後にコピー
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート