将jQuery转换为Javascript问题

我在将jQuery代码转换为JavaScript代码时遇到了一些问题

例如，我有一段代码：

$(document).ready(function() {
    doing some stuff 
});

我试着这样编写代码：

document.getElementById("canvas").onload = function () {
    doing some stuff
};

但它不起作用

下面是我试图转换的更大的代码：

$(document).ready(function() {
    var color = "#000000";
    var sign = false;
    var begin_sign = false;
    var width_line = 5;
    var canvas = $("#canvas");
    var cursorX, cursorY;
    var context = canvas[0].getContext('2d');

    context.lineJoin = 'round'; 
    context.lineCap = 'round'; 

    $(this).mousedown(function(e) {
        sign = true; 
        cursorX = (e.pageX - this.offsetLeft);
        cursorY = (e.pageY - this.offsetTop);
    });

    $(this).mouseup(function() {
        sign = false;
        begin_sign = false;
    });

有关信息，我想用JavaScript获得以下结果：

使用addEventListener而不是onload，这样您就可以有多个“侦听器”。另外，我不认为canvas元素有“load”事件，所以改用文档。与document.offsetX和document.body.offsetX相同

你的第一个例子是：

document.addEventListener('load', function() {
    // doing some stuff
});

还有你的第二个：

document.addEventListener('load', function() {
    var color = "#000000";
    var sign = false;
    var begin_sign = false;
    var width_line = 5;
    var canvas = document.getElementById('canvas');
    var cursorX, cursorY;
    var context = canvas.getContext('2d');

    context.lineJoin = 'round'; 
    context.lineCap = 'round'; 

    document.addEventListener('mousedown', function(e) {
        sign = true; 
        cursorX = (e.pageX - document.body.offsetLeft);
        cursorY = (e.pageY - document.body.offsetTop);
    });

    document.addEventListener('mouseup', function(e) {
        sign = false;
        begin_sign = false;
    });
});

这会管用的

$(document).ready(function() {
var color = "#000000";
var sign = false;
var begin_sign = false;
var width_line = 5;
var canvas = $("#canvas");
var cursorX, cursorY;
var context = canvas[0].getContext('2d');

context.lineJoin = 'round'; 
context.lineCap = 'round'; 
 });

   $(document).mousedown(function(e) {
    sign = true; 
    cursorX = (e.pageX - this.offsetLeft);
    cursorY = (e.pageY - this.offsetTop);
    });

   $(document).mouseup(function() {
    sign = false;
    begin_sign = false;
    });

---

继续使用您提供的部分解决方案，因为您从jQuery元素更改为DOM节点，所以必须以不同的方式访问一些属性，如下所述

document.addEventListener("DOMContentLoaded", function(event) {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d'); // <--- remove [0] index

    canvas.addEventListener('mousemove', function(e) { ... ))

    function clear_canvas() {
        // offsetWidth and offsetHeight instead of Height() and Width()
        context.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
    }
});

---

您确定画布有加载事件吗？为什么是canvas而不是window？为什么要将document元素上的处理程序更改为canvas元素上的处理程序。这不是等效的转录。您可以使用window.onload=函数{//code up！}。看见有关mousedown mouseup侦听器的信息，请参见document.addEventListener window.onload不是等效的。Jquery在文档准备就绪的情况下做的不止这些。谢谢@JSONaLeo！两个建议都很有效！谢谢但是，如果我这样做，就会出现以下错误：uncaughttypeerror:canvas.mousemove不是HTMLDocument中的函数。canvas-2.js:29是的，我错过了那个，请看我的编辑。它与您移植的所有其他事件侦听器类似。