我正在尝试创建一个简单的 chrome 扩展，允许用户在任何网页上绘图。
我为我喜欢的笔创建了一个设计，但不确定如何将网页变成画布。
【问题讨论】：
标签： javascript google-chrome canvas google-chrome-extension html5-canvas
我认为您必须将画布附加到 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>【讨论】：
window 是全局 this，因此在您的代码中是多余的。您不使用它来访问任何其他全局属性，例如window.document，所以为什么要随意将它用于window.innerWidth。此外，您不需要查询 body 它是一个命名属性 window.document.body，因此用作 document.body.appendChild(canvas)