首页js绘制平面直角坐标系并绘制图片加刻度显示

js绘制平面直角坐标系并绘制图片加刻度显示

时间: 2023-08-02 19:05:44 浏览: 111

要绘制平面直角坐标系并在其上绘制图片和刻度，可以使用HTML5的Canvas元素和JavaScript来实现。下面是一个简单的示例代码，你可以根据自己的需求进行修改和扩展。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas Demo</title> </head> <body> <canvas id="myCanvas" width="600" height="600"></canvas> <script> // 获取Canvas元素和绘图上下文 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制坐标轴 ctx.beginPath(); ctx.moveTo(50, 550); ctx.lineTo(550, 550); ctx.moveTo(50, 550); ctx.lineTo(50, 50); ctx.stroke(); // 绘制x轴刻度 for (var i = 0; i <= 10; i++) { var x = 50 + i * 50; ctx.beginPath(); ctx.moveTo(x, 550); ctx.lineTo(x, 540); ctx.stroke(); ctx.fillText(i, x - 5, 565); } // 绘制y轴刻度 for (var i = 0; i <= 10; i++) { var y = 550 - i * 50; ctx.beginPath(); ctx.moveTo(50, y); ctx.lineTo(40, y); ctx.stroke(); ctx.fillText(i, 25, y + 5); } // 绘制图片 var img = new Image(); img.src = "image.jpg"; img.onload = function() { ctx.drawImage(img, 100, 100, 400, 400); }; </script> </body> </html> ``` 在上述代码中，我们首先获取了Canvas元素和绘图上下文，然后绘制了x轴和y轴，并通过循环绘制了刻度。最后，我们加载了一张图片，并在Canvas上绘制了它。需要注意的是，Canvas的坐标系与普通的平面直角坐标系不同，y轴方向是向下的。所以，在绘制y轴刻度时，我们使用了550减去i乘以50来计算y坐标。

阅读全文