daixy.github.com/speak.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
<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>だいくしー大喜利</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button id="save">画像として保存する</button>
<canvas id="canvas" width="1600" height="1200"><canvas>
<script>
(function(){
    // Canvas
    var canvas = document.querySelector('#canvas');
    var context = canvas.getContext('2d');
    // daiksy image
    var image = new Image();
    image.src = "img/daixy_odai.png";
    $(image).load(function(){
     context.drawImage(image, 0, 0);
    });
    // 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;
    });
*/
    function drawStart(event) {
         event.preventDefault();
        isDrawing = true;
        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('mousedown',  drawStart, false);
    canvas.addEventListener('touchstart', drawStart, false);

    function drawing(event) {
         event.preventDefault();
        if(isDrawing){
            draw(event, context);
        }
    }
    canvas.addEventListener('mousemove', drawing, false);
    canvas.addEventListener('touchmove', drawing, false);

    function drawEnd(event) {
        event.preventDefault();
        if(isDrawing){
            draw(event, context);
            isDrawing = false;
        }
    }
    canvas.addEventListener('mouseup',  drawEnd, false);
    canvas.addEventListener('mouseout', drawEnd, false);
    canvas.addEventListener('touchend', drawEnd, 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);
    }
    // Save
    var btnSave = document.querySelector('#save');
    btnSave.addEventListener('click', function(){
        var dataUrl = canvas.toDataURL();
        window.open(dataUrl, "new image");
    });
})();
</script>
</body>
</html>