我知道有类似的问题here https://stackoverflow.com/questions/14680690/draw-rectangles-and-annotate-webpage,但问题和答案都没有任何代码。
我想做的就是将此功能移植到 100% Javascript 解决方案中。现在我可以使用 PHP 在 HTML 内容之上绘制一个矩形。
我使用 CasperJS 抓取一个网站,拍摄快照,将快照路径连同一个 json 对象发送回 PHP,该对象包含使用 GD 库绘制矩形所需的所有信息。这可行,但现在我想将该功能移植到 Javascript 中。
我获取矩形信息的方式是使用getBoundingClientRect()
返回一个对象top
,bottom
,height,
width
, left
,and right
.
有没有办法将网站的 HTML“绘制”到画布元素,然后在该画布元素上绘制一个矩形?
或者有什么方法可以使用 Javascript 在 HTML 上绘制一个矩形?
希望我的问题足够清楚。
这是我用来获取要在其周围绘制矩形的元素的坐标的函数。
function getListingRectangles() {
return Array.prototype.map.call(document.querySelectorAll('.box'), function(e) {
return e.getBoundingClientRect();
});
您可以创建一个 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] 像素的位置添加一个黄色矩形。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)