daixy.github.com/index.html at master · daixy/daixy.github.com · GitHub

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5">
	<meta name="description" content="">
	<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
	<link rel="stylesheet" type="text/css" href="css/main.css">
    <title>ソーシャル ネットワーク daixi</title>
<style type="text/css">
#canvas {
  position: fixed;
  top:0;
  left: 0;
  z-index: 5;
}
</style>
</head>

<body>
<!-- [[ ヘッダー ]] -->
<header class="global_header" id="global_header">
	<h1>daixi</h1>
</header>
<!-- /[[ ヘッダー ]] -->

<!-- [[ メインメニュー ]] -->
<nav class="global_menu" id="global_menu">
	<ul>
		<li><a href="TODO">トップ</a></li>
		<li><a href="TODO">プロフィール</a></li>
		<li><a href="TODO">日記</a></li>
		<li><a href="TODO">コミュニティ</a></li>
		<li><a href="TODO">設定</a></li>
	</ul>
</nav>
<!-- /[[ メインメニュー ]] -->

<!--[[メインコンテンツ]]-->
<section class="main_content" id="main_content">
<img src="img/daixy_profile.png" />

</section>
<!-- [[ フッター ]] -->
<footer class="global_footer" id="global_footer">
    <p><small>&copy; tango 2012.</small></p>
</footer>
<!-- /[[ フッター ]] -->
<canvas id="canvas" width="1600" height="1024"></canvas>
<script>
(function(){
    // Canvas
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    // flag
    var isDrawing = false;
    // Brush
    context.lineWidth = 3;
    context.lineCap = 'round';
    //context.fillStyle = 'black';
    //context.strokeStyle = 'black';
    canvas.addEventListener('mousemove', function(event){
        event.preventDefault();
        var out = document.getElementById('out');
        var p = getMousePosition(event);
        out.value = "x:" + p.x + " y:" + p.y;
    });
    canvas.addEventListener('mousedown', function(event){
        event.preventDefault();
        isDrawing = true;
        var color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
        for(count = color.length; count < 6; count++){
          color = "0" + color;
        }
        context.fillStyle = color;
        context.strokeStyle = color;
        var p = getMousePosition(event);
        context.beginPath();
        context.arc(p.x, p.y, context.lineWidth / 2, 0, Math.PI * 2, true);
        context.fill();
        context.beginPath();
        context.moveTo(p.x, p.y);
    });
    canvas.addEventListener('mousemove', function(event){
        event.preventDefault();
        if(isDrawing){
            draw(event, context);
        }
    });
    canvas.addEventListener('mouseup', function(event){
        event.preventDefault();
        if(isDrawing){
            draw(event, context);
            isDrawing = false;
        }
    });
    canvas.addEventListener('mouseout', function(event){
        event.preventDefault();
        if(isDrawing){
            draw(event, context);
            isDrawing = false;
        }
    });
       function getMousePosition(event){
        var rect = event.target.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }
    function draw(event, context){
        var p = getMousePosition(event);
        context.lineTo(p.x, p.y);
        context.stroke();
        context.beginPath();
        context.moveTo(p.x, p.y);
    }
})();
</script>

</body>
</html>