UNPKG

1.78 kBHTMLView Raw
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 <style>
11 canvas {
12 background-color: gray;
13 margin: 10px;
14 }
15 </style>
16</head>
17
18<body>
19
20 <!-- 原生测试 -->
21 <canvas width="400" height="400" style='width:200px;height:200px;' id="canvas1"></canvas>
22 <canvas width="400" height="400" style='width:200px;height:200px;' id="canvas2"></canvas>
23
24 <script>
25
26 var painter1 = document.getElementById('canvas1').getContext('2d');
27 painter1.scale(2, 2);
28 painter1.moveTo(200, 100);
29 painter1.fillStyle = 'blue';
30 painter1.arc(100, 100, 100, 0, Math.PI * 2);
31 painter1.fill();
32
33 var painter2 = document.getElementById('canvas2').getContext('2d');
34 painter2.scale(2, 2);
35
36 // 由于缩放了，这里的参数和原生的写法有点区别
37 painter2.drawImage(document.getElementById('canvas1'), 0, 0, 400, 400, 0, 0, 200, 200);
38
39 </script>
40
41 <!-- 库测试 -->
42 <canvas width="200" height="200" id="canvas3"></canvas>
43 <canvas width="200" height="200" id="canvas4"></canvas>
44
45 <script>
46
47 var painter3 = $$('#canvas3').painter();
48 var painter4 = $$('#canvas4').painter();
49
50 // 库兼容了原有的写法，保证使用者更容易学习
51 painter3.config('fillStyle', 'red').fillCircle(100, 100, 100);
52
53 painter4.drawImage(document.getElementById('canvas3'));
54
55 </script>
56
57</body>
58
59</html>