用javascript在html上绘制矩形

Question

我知道有一个类似的问题在这里,但没有问题,也不回答任何代码.

我想要做的是将此功能移植到100%Javascript解决方案.现在我可以使用PHP在HTML内容上绘制一个矩形.

我用CasperJS抓取一个网站,拍摄快照,将快照路径发送回PHP以及一个json对象,该对象包含用GD库绘制矩形所需的所有信息.这有效,但现在我想将该功能移植到Javascript中.

我发现了矩形信息的方式是使用getBoundingClientRect()它返回一个对象有top,bottom,height, width,left,和right.

有没有办法将网站的HTML"绘制"到canvas元素,然后在该canvas元素上绘制一个Rectangle？或者有没有办法使用Javascript在HTML上绘制一个矩形？

希望我的问题很清楚.

这是我用来获取我想要绘制一个Rectangle的元素坐标的函数.

function getListingRectangles() {
    return Array.prototype.map.call(document.querySelectorAll('.box'), function(e) {
        return e.getBoundingClientRect();
});

Answer 1

您可以创建一个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();

此代码应在页面左上角的[100,150]像素处添加黄色矩形.