1 |
|
2 | <html lang="en">
|
3 |
|
4 | <head>
|
5 | <meta charset="UTF-8">
|
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
8 | <title>lineTo线条粗细不一致问题</title>
|
9 | <script src="../build/image2D.js"></script>
|
10 | </head>
|
11 |
|
12 | <body>
|
13 |
|
14 | <script>
|
15 |
|
16 | $$('<canvas>非常抱歉,您的浏览器不支持canvas!</canvas>')
|
17 | .appendTo('body')
|
18 | .attr({
|
19 | width: 400,
|
20 | height: 400
|
21 | }).painter()
|
22 |
|
23 | /**
|
24 | * 实验开始
|
25 | * -----------------
|
26 | */
|
27 | .beginPath()
|
28 | .moveTo(201.5, 0)
|
29 | .lineTo(0, 201.5)
|
30 | .lineTo(201.5, 400)
|
31 | .lineTo(400, 201.5)
|
32 | .lineTo(201.5, 0)
|
33 | .lineTo(201.5, 400)
|
34 | .lineTo(350, 350)
|
35 | .lineTo(400, 201.5)
|
36 | .lineTo(0, 201.5)
|
37 | .stroke();
|
38 |
|
39 |
|
40 | $$('<svg></svg>')
|
41 | .appendTo('body')
|
42 | .attr({
|
43 | width: 400,
|
44 | height: 400
|
45 | }).painter()
|
46 |
|
47 | /**
|
48 | * 实验开始
|
49 | * 现象:屏幕缩放一定程度以后,线条粗细不一致
|
50 | * -----------------
|
51 | */
|
52 | .beginPath()
|
53 | .moveTo(201.5, 0)
|
54 | .lineTo(0, 201.5)
|
55 | .lineTo(201.5, 400)
|
56 | .lineTo(400, 201.5)
|
57 | .lineTo(201.5, 0)
|
58 | .lineTo(201.5, 400)
|
59 | .lineTo(350, 350)
|
60 | .lineTo(400, 201.5)
|
61 | .lineTo(0, 201.5)
|
62 | .bind('<path>')
|
63 | .appendTo()
|
64 | .stroke();
|
65 |
|
66 | </script>
|
67 |
|
68 | </body>
|
69 |
|
70 | </html>
|