将JavaScript转换为JQuery（包括HTML画布）

我是新手。我似乎无法将这个普通的JS转换为工作JQuery。能帮我一点忙吗？我们将不胜感激。如果有人真的通过并修复了每条线路，那就太好了。我试过了，但没有用

window.onload = function(){

    "use strict";

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    var eyeColorControl = document.getElementById("eyeColor");
    var eyeSizeControl = document.getElementById("eyeSize");
    var sleepinessControl = document.getElementById("Sleepiness");
    var frownControl = document.getElementById("Frowniness");

    var smilex = canvas.width / 2;
    var smiley = canvas.height -60;
    var radiusS = 70;
    var startAngle = 1.1 * Math.PI;
    var endAngle = 1.9 * Math.PI;
    var counterClockwise = false;

    var eye1x = canvas.width / 4;
    var eye1Y = canvas.height / 3;
    var eye2x = canvas.width / 1.34;
    var eye2Y = canvas.height / 3;

    var radiusE = 70;
    var scaleY = 1;

    var newLineWidth = 5;

    var newFillStyle = context.fillStyle;

    document.getElementById('clear').addEventListener('click', function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }, false);

    document.getElementById("renderBtn").onclick = function() {draw();};

    function draw() 
    { 

        context.fillStyle = document.getElementById("eyeColor").value;
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        context.arc(smilex, smiley, radiusS, startAngle, endAngle, counterClockwise);
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
        context.setTransform(1,0,0,1,0,0);

        context.beginPath();
        context.arc(eye1x, eye1Y, radiusE, 0, 2 * Math.PI, false);
        context.fill();
        context.lineWidth = newLineWidth;
        context.stroke();
        context.setTransform(1,0,0,1,0,0);

        context.beginPath();
        context.arc(eye2x, eye2Y, radiusE, 0, 2 * Math.PI, false);
        context.fill();
        context.lineWidth = newLineWidth;
        context.stroke();
        context.setTransform(1,0,0,scaleY,0,0);

    }

    draw();

    eyeSizeControl.onchange = function() 
    {
       radiusE = parseFloat(eyeSizeControl.value);
       draw();
    }

    sleepinessControl.onchange = function() 
    {
       newLineWidth = parseFloat(sleepinessControl.value);
       draw();
    }

    frownControl.onchange = function() 
    {
       scaleY = parseFloat(frownControl.value);
       draw();
    }

    eyeColorControl.onchange = function() 
    {
       newFillStyle = parseFloat(eyeColorControl.value);
       draw();
    }

    var dataURL = canvas.toDataURL();
    document.getElementById('myCanvas').src = dataURL;

};

---

你需要描述你的问题是什么。你到底想干什么？预期产量是多少？这是一个交互式HTML画布，用户可以使用输入字段编辑其属性。这里是JS提琴：只需要将javascript转换成jqueryThere这里有很多繁忙的工作。我可以让您开始将所有“document.getElementById”命令更改为$（'#theid'）.val（）以输入字段。单击函数可以更改为（“#按钮”）。在（'click'，function（）{put your function here}）上；