greasemonkey画布脚本

Question

最近，我一直在编写一个Greasemonkey脚本，它可以将图像添加到某个页面，确切地说，是http://fairview.deadfrontier.com，它具有允许在添加的图像上绘制的功能。

我没有使用JavaScript的经验，所以在经历了一个痛苦而漫长的过程之后，我设法创建了一个独立的脚本块来完成这项工作，并且在.htm文件中脱机使用它时，它工作得很好。

但是，当我将脚本上传到userscripts.org并安装在Greasemonkey中时，它停止工作。我将感谢任何想法或解决方案，将帮助我完成脚本，以便我可以分享它。下面是单个.htm文件中有问题的脚本：

<script type="text/javascript">
window.onload = function() {

    var oCanvas = document.getElementById("thecanvas");
      var oCtx = oCanvas.getContext("2d");

    var iWidth = oCanvas.width;
    var iHeight = oCanvas.height;

    oCtx.fillStyle = "transparent";
    oCtx.fillRect(0,0,iWidth,iHeight);

    oCtx.beginPath();
    oCtx.strokeStyle = "rgb(255,0,0)";

    oCanvas.onmousedown = function(e) {
        bMouseIsDown = true;
        iLastX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
        iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
    }
    oCanvas.onmouseup = function() {
        bMouseIsDown = false;
        iLastX = -1;
        iLastY = -1;
    }
    oCanvas.onmousemove = function(e) {
        if (bMouseIsDown) {
            var iX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
            var iY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
            oCtx.moveTo(iLastX, iLastY);
            oCtx.lineTo(iX, iY);
            oCtx.stroke();
            iLastX = iX;
            iLastY = iY;
        }
    }
}
document.write("<canvas width=\"356\" height=\"700\" style=\"border: 1px solid black; background-image:url('http:\/\/i.imgur.com\/fI3qz.jpg'); position:fixed; top:10px; left: 10px;\" id=\"thecanvas\"><\/canvas>");
</script>

Answer 1

好的，这是我看到的那个文件(canvas.htm)的问题，关于转换到GM，以及一般的问题。

首先是最严重的：

1. 不能/不能使用document.write。使用像这样的东西：

var zNode = document.createElement ('canvas')；zNode.setAttribute ('id'，'thecanvas')；document.body.appendChild (zNode);

1. In Greasemonkey，event handlers can't be set likeoCanvas.onmousedown = function(e) { ...

使用：

(window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft)；(“(window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop)；oCanvas.addEventListener”，函数(e) { bMouseIsDown = true；iLastX = e.clientX - oCanvas.offsetLeft +mousedown iLastY = e.clientY - oCanvas.offsetTop +mousedown }，true );

1. 不要使用内联样式，你将为自己节省大量的痛苦。如果您为每个项目1创建了canvas节点，那么您可以使用此Greasemonkey设置它的样式：

GM_addStyle ( (<>).toString () );

当将画布作为更大的page.

• bMouseIsDown的一部分时，

1. X/Y数学是off的，它似乎被用作全局变量；它应该这样设置。

无论如何，这应该足以让您的GM脚本工作，开始。如果是，请将此问题标记为已回答。

对于任何后续问题，请在问题正文中包含脚本的完整代码(但代码格式为StackOverflow)。