canvas_sign/canvasTest.html at master · kenan2016/canvas_sign · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		body,html{
		    margin: 0;
		    padding: 0;
		    height: 100%;
		}
		#canvas {
		    border:0.01rem solid #f30;
		}
		#canvas-btn{
		    display: block;
		    margin: 0;
		    padding: 0.13rem;
		}
		#clear_btn{
		    width: 80%;
		    background: #ca4341;
		    margin: auto;
		    text-align: center;
		    line-height: 1rem;
		    margin-top: 0.27rem;
		    color: #fff;
		    border-radius: 1.31rem;
		    clear: both;
		}
		#save_btn{
		    width: 80%;
		    background: #4cd964;
		    margin: auto;
		    text-align: center;
		    line-height: 1rem;
		    margin-top: 0.27rem;
		    color: #fff;
		    border-radius: 1.31rem;
		    clear: both;
		}
    </style>
    </head>

    <body>
    <canvas id='canvas'></canvas>
    <div id="canvas-btn">
        <div id="clear_btn" class="op_btn">重画</div>
        <div id="save_btn" class="save_btn">保存</div>
        <div class="cleaerfix"></div>
    </div>
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/touch.js"></script>
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/flexible_css.debug.js"></script>

    <script>
   	//获取页面尺寸
    var canvasWidth = document.body.clientWidth;
    var canvasHeight = canvasWidth;
    //声明canvas
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //设置canvas尺寸
    canvas.width = canvasWidth * 0.98;
    canvas.height = canvasHeight;
    //画笔颜色
    var strokeColor = "#000";
    //鼠标
    isMouseDown = false;
    //上一次绘制的的坐标
    var lastLoc = {x:0,y:0};
    //初始记录事件
    var lastTimestamp = 0;
    //上一次线条宽度
    var lastLineWidth = -1;
    //var
    var maxV = 10;
    var minV = 0.1;
    var maxLineWidth = 5;
    var minLineWidth = 1;

    //点击色块切换画笔颜色
    $(".colorBtn").on("click",function (e){
        $(".colorBtn").removeClass('colorBtnBorder');
        $(this).addClass("colorBtnBorder");
        strokeColor = $(this).css("");
    })
    //清除
    $('#clear_btn').on('click',function (e){
        context.clearRect( 0, 0, canvasWidth,canvasHeight);
    });
    //保存画图
    $('#save_btn').on('click',function (e){
    	var image = canvasToImage(canvas);
    	console.log(image);
    });
    //获取canvas 坐标 x，y 分别代表相对window内的xy
    function windowToCanvas(x,y){
        //canvas提供的方法返回canvas 距 他外围包围盒子的距离left,top值
        var bbox = canvas.getBoundingClientRect();
        //返回的就是canvas 内的坐标值
        return {x : Math.round(x - bbox.left),y : Math.round(y - bbox.top)}
    }
    //封装 事件
    function beginStroke(point){
        isMouseDown = true;
        //第一次用户画的坐标初始值
        lastLoc = windowToCanvas(point.x,point.y);
        //获取首次点击鼠标 事件戳
        lastTimestamp = new Date().getTime();
    }
    function endStroke(){
        isMouseDown = false;
    }
    function moveStroke(point){
        //开始绘制直线
        var curLoc = windowToCanvas(point.x , point.y);
        //路程
        var s = calcDistance( curLoc, lastLoc);
        //结束时间
        var curTimestamp = new Date().getTime();
        //时间差
        var t = curTimestamp - lastTimestamp;
        //绘制线条粗细
        var lineWidth = calcLineWidth(t,s);

        //绘制
        context.beginPath();
        context.moveTo(lastLoc.x ,lastLoc.y);
        context.lineTo(curLoc.x , curLoc.y);
        context.strokeStyle = strokeColor;
        context.lineWidth = lineWidth;
        context.lineCap = "round";
        context.lineJoin = "round";
        context.stroke();
        //给lastLoc赋值维护
        lastLoc = curLoc;
        //时间更新
        lastTimestamp = curTimestamp;
        lastLineWidth = lineWidth;
    }
    //pc鼠标事件
    canvas.onmousedown = function(e){
        e.preventDefault();
        beginStroke({x:e.clientX , y:e.clientY});
    }
    canvas.onmouseup = function(e){
        e.preventDefault();
        endStroke();
    }
    canvas.onmouseout = function(e){
        e.preventDefault();
        endStroke();
    }

    canvas.onmousemove = function(e){
        e.preventDefault();
        if(isMouseDown){
            moveStroke({x:e.clientX , y:e.clientY});
        }
    }
    //移动端
    canvas.addEventListener("touchstart",function(e){
        e.preventDefault();
        touch = e.touches[0]; //限制一根手指触碰屏幕
        beginStroke({x:touch.pageX , y:touch.pageY});
    });
    canvas.addEventListener("touchend",function(e){
        e.preventDefault();
        endStroke();
    });
    canvas.addEventListener("touchmove",function(e){
        e.preventDefault();
        if( isMouseDown){
            touch = e.touches[0];
            moveStroke({x: touch.pageX , y:touch.pageY});
        }
    });
    //速度 = 路程 / 时间     用来计算书写速度来改变线条粗细
    function calcDistance (loc1,loc2){
        //返回 数的平方根
        return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y) );
    }
    //线条宽度
    function calcLineWidth(t,s){
        var v = s/t;
        var resultLineWidth;
        if(v <= minV){
            resultLineWidth = maxLineWidth;
        }else if(v >= maxV){
            resultLineWidth = minLineWidth;
        }else{
            resultLineWidth = maxLineWidth - (v-minV)/(maxV-minV)*(maxLineWidth-minLineWidth);
        }
        if( lastLineWidth == -1){
            return resultLineWidth;
        }else{
            return lastLineWidth*2/3 + resultLineWidth*1/3;
        }
    }
    // 将canvas转换成画布
    function canvasToImage(canvas){
    	var image = new Image();
    	image.src = canvas.toDataURL("image/png");
    	return image;
    }
    </script>
    </body>
</html>