[英]Using HTML5 Canvas in a Chrome Extension
我正在尝试创建一个简单的 chrome 扩展，允许用户在任何网页上绘图。
我为我喜欢的笔创建了一个设计，但不确定如何将网页变成画布。
我认为您必须将画布附加到body并使其位置absolute以便它可以位于所有内容的顶部。
下面是一个例子：
const canvas = document.createElement('canvas'); canvas.id = "my-canvas"; canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style.top = '0px'; canvas.style.position = "absolute"; canvas.style.zIndex = 999; const body = document.getElementsByTagName("body")[0]; body.appendChild(canvas); // Some optional drawings. const ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(255, 0, 0, 0.2)"; ctx.fillRect(100, 100, 200, 200); ctx.fillStyle = "rgba(0, 255, 0, 0.2)"; ctx.fillRect(150, 150, 200, 200); ctx.fillStyle = "rgba(0, 0, 255, 0.2)"; ctx.fillRect(200, 50, 200, 200);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Canvas Example</title> </head> <body> <h1>This is a special body title</h1> <div> LALALALAL LALALALALAL LALALALALA </div> </body> </html>
如何使用Google Chrome浏览器扩展程序将HTML5 Canvas的新屏幕截图发送到新标签页？
[英]How to send a new screenshot HTML5 Canvas image to a new tab using a Google Chrome Extension?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.