canvas 坐标转换
1 //把页面上的坐标转换为canvas坐标
2 function windowToCanvas(canvas,x,y){
3 var bbox = canvas.getBoundingClientRect();
4 return {
5 x: x - bbox.left * (context.canvas.width / bbox.width),
6 y: y - bbox.top * (context.canvas.height / bbox.height)
7 }
8 }
9
canvas画grid
1 function drawGrid( color, stepx, stepy){
2 context.strokeStyle = color;
3 context.lineWidth = 0.5;
4 for(var i = stepx + 0.5;i < canvas.width;i += stepx){
5 context.beginPath();
6 context.moveTo(i,0);
7 context.lineTo(i,context.canvas.height);
8 context.stroke();
9 }
10 for(var i = stepx + 0.5;i < context.canvas.height;i += stepx){
11 context.beginPath();
12 context.moveTo(0,i);
13 context.lineTo(context.canvas.width,i);
14 context.stroke();
15 }
16 }
canvas图片放大
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 background: rgba(100,145,250,0.3);
9 }
10 #canvas{
11 border:1px solid cornflowerblue;
12 position: absolute;
13 left:250px;
14 top:10px;
15 background: #eee;
16 border: thin solid #aaa;
17 cursor: pointer;
18 box-shadow: rgba(200,200,255,0.9) 5px 5px 10px;
19 }
20 #scaleSlider{
21 vertical-align: center;
22 width:100px;
23 margin-left: 90px;
24 }
25 #controls{
26 margin-left:15px;
27 padding:0;
28 }
29 #scaleOutput{
30 position: absolute;
31 width:60px;
32 height: 30px;
33 margin-left:10px;
34 vertical-align: center;
35 text-align: center;
36 color: blue;
37 text-shadow: 2px 2px 4px rgba(100,140,250,0.8);
38 }
39 </style>
40 </head>
41 <body>
42 <div id="controls">
43 <output id="scaleOutput">1.0</output>
44 <input type="range" id="scaleSlider" min="1" max="3.0" step="0.01" value="1.0">
45 </div>
46
47 <canvas id="canvas" width="800" height="520"></canvas>
48
49 <script>
50 var canvas = document.getElementById(‘canvas‘),
51 context = canvas.getContext(‘2d‘),
52 selectElement = document.getElementById(‘compositingSelect‘),
53 scaleSlider = document.getElementById(‘scaleSlider‘),
54 scaleOutput = document.getElementById(‘scaleOutput‘),
55 scale = 1.0,
56 MINIMUM_SCALE = 1.0,
57 MAXIMUM_SCALE = 3.0,
58 img = new Image();
59
60 // 放大镜
61 //fUNCTION------------------------
62 function drawImage(){
63 var w = canvas.width,
64 h = canvas.height,
65 sw = w * scale,
66 sh = h * scale;
67 context.clearRect(0,0,w,h);
68 context.drawImage(img, -sw/2 + w/2, -sh/2 + h/2, sw, sh);
69 }
70
71 function drawScaleText(value){
72 var text = parseFloat(value).toFixed(2);
73 var percent = parseFloat(value - MINIMUM_SCALE) / parseFloat(MAXIMUM_SCALE - MINIMUM_SCALE);
74 scaleOutput.innerText = text;
75 percent = percent < 0.35 ? 0.35 : percent;
76 scaleOutput.style.fontSize = percent * MAXIMUM_SCALE/1.5 +‘em‘;
77 }
78
79 scaleSlider.onchange = function(e){
80 scale = e.target.value;
81 if(scale < MINIMUM_SCALE){
82 scale = MINIMUM_SCALE;
83 }else if(scale > MAXIMUM_SCALE){
84 scale = MAXIMUM_SCALE;
85 }
86 drawScaleText(scale);
87 drawImage();
88 }
89
90 context.fillStyle = ‘cornflowerblue‘;
91 context.strokeStyle = ‘yellow‘;
92 context.shadowColor = ‘rgba(50,50,50,1.0)‘;
93 context.shadowOffsetX = 5;
94 context.shadowOffsetY =5;
95 context.shadowBlur = 10;
96
97 img.src = ‘1.jpg‘;
98 img.onload = function(e){
99 drawImage();
100 drawScaleText(scaleSlider.value);
101 };
102 </script>
103 </body>
104 </html>
时间： 2024-10-22 13:43:59