1 | <!DOCTYPE html>
|
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>不同绘制方法导致的模糊问题</title>
|
9 | <script src="../build/image2D.js"></script>
|
10 | </head>
|
11 |
|
12 | <body>
|
13 |
|
14 | <script>
|
15 |
|
16 | var painter = $$('<canvas>非常抱歉,您的浏览器不支持canvas!</canvas>')
|
17 | .appendTo('body')
|
18 | .attr({
|
19 | width: 400,
|
20 | height: 400
|
21 | }).painter();
|
22 |
|
23 |
|
24 | var interFun = $$.cardinal().setP([
|
25 | [0, 300], [100, 300], [200, 200], [300, 160], [400, 300]
|
26 | ]);
|
27 |
|
28 | /**
|
29 | * 实验开始
|
30 | * -----------------
|
31 | */
|
32 |
|
33 |
|
34 | painter
|
35 | .config('strokeStyle', 'red')
|
36 | .beginPath()
|
37 | for (var deep = 0; deep < 400; deep += 0.5) {
|
38 | painter.lineTo(deep, interFun(deep) - 10)
|
39 | .stroke();
|
40 | }
|
41 |
|
42 |
|
43 | painter
|
44 | .config('strokeStyle', 'blue')
|
45 | .beginPath()
|
46 | for (var deep = 0; deep < 400; deep += 0.5) {
|
47 | painter.lineTo(deep, interFun(deep) + 10);
|
48 | }
|
49 | painter.stroke();
|
50 |
|
51 | </script>
|
52 |
|
53 | </body>
|
54 |
|
55 | </html>
|