javascript 使用javascript在html上绘制矩形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19840907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
draw rectangle over html with javascript
提问by ILikeTacos
I know there's a similar question here, but neither the question nor the answer have any code.
我知道有一个类似的问题在这里，但没有问题，也不回答任何代码。
What I want to do, is to port this functionality to a 100% Javascript solution. Right now I'm able to draw a rectangle on top of HTML content using PHP.
我想做的是将此功能移植到 100% Javascript 解决方案中。现在我可以使用 PHP 在 HTML 内容之上绘制一个矩形。
I scrape a website with CasperJS, take a snapshot, send the snapshot path back to PHP along with a json object that contains all the information necessary to draw a rectangle with GD libraries. That works, but now I want to port that functionality into Javascript.
我用 CasperJS 抓取了一个网站，拍了一张快照，将快照路径和一个 json 对象一起发送回 PHP，该对象包含使用 GD 库绘制矩形所需的所有信息。那行得通，但现在我想将该功能移植到 Javascript 中。
The way I'm getting the rectangle information is using getBoundingClientRect()that returns an object with top,bottom,height,width, left,and right.
我获取矩形信息的方式是使用getBoundingClientRect()它返回一个带有top, bottom, height,width, left, and的对象right。
Is there any way to "draw" the HTML of the website to a canvas element, and then draw a Rectangle on that canvas element? Or is there any way to draw a rectangle on top of the HTML using Javascript?
有什么办法可以将网站的HTML“绘制”到canvas元素上，然后在那个canvas元素上绘制一个矩形？或者有什么方法可以使用 Javascript 在 HTML 顶部绘制一个矩形？
Hope my question is clear enough.
希望我的问题足够清楚。
This is the function that I'm using to get the coordinates of the elements that I want to draw a Rectangle around.
这是我用来获取要在其周围绘制矩形的元素的坐标的函数。
function getListingRectangles() {
return Array.prototype.map.call(document.querySelectorAll('.box'), function(e) {
return e.getBoundingClientRect();
});
回答by Borre Mosch
You can create a canvas element and place it on top of the HTML page:
您可以创建一个 canvas 元素并将其放置在 HTML 页面的顶部：
//Position parameters used for drawing the rectangle
var x = 100;
var y = 150;
var width = 200;
var height = 150;
var canvas = document.createElement('canvas'); //Create a canvas element
//Set canvas width/height
canvas.style.width='100%';
canvas.style.height='100%';
//Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Position canvas
canvas.style.position='absolute';
canvas.style.left=0;
canvas.style.top=0;
canvas.style.zIndex=100000;
canvas.style.pointerEvents='none'; //Make sure you can click 'through' the canvas
document.body.appendChild(canvas); //Append canvas to body element
var context = canvas.getContext('2d');
//Draw rectangle
context.rect(x, y, width, height);
context.fillStyle = 'yellow';
context.fill();
This code should add a yellow rectangle at [100, 150] pixels from the top left corner of the page.
此代码应在距页面左上角 [100, 150] 像素处添加一个黄色矩形。
