如何在javascript中缩小图像？

我正在制作一个游戏槽并在illustrator中创建图像，但当我将它们转换为javascript时，它们确实很大。在javascript中是否有办法使它们变小，还是我必须再次创建它们并使它们变小

这是我的密码：

 window.onload = function() {


        //global variables
        var credit=0;
        var betAmount=0;
        var THREE_DIAMONDS="";
        var TWO_DIAMONDS="";
        var ONE_DIAMOND="";
        var SAME_BOTH="";
        var SAME_COLOR="";
        var SAME_SHAPE="";


        var redSquare={shape:"square", color:"red", width:100, height:100, image:"images/apple.png"};
        var blueCircle={shape:"circle", color:"blue", width:100, height:100,image:"images/apple2.png"};
        var blueSquare={shape:"square", color:"blue", width:100, height:100,image:"images/apple3.png"};
        var blueTriangle={shape:"triangle", color:"blue", width:100, height:100,image:"images/cherry.png"};
        var greenCircle={shape:"circle", color:"green",width:100, height:100, image:"images/cherry2.png"};
        var greenSquare={shape:"square", color:"green", width:100, height:100,image:"images/cherry3.png"};
        var greenTriangle={shape:"triangle", color:"green", width:100, height:100,image:"images/watermelon.png"};
        var redCircle={shape:"circle", color:"red", width:100, height:100,image:"images/watermelon2.png"};
        var redTriangle={shape:"triangle", color:"red", width:100, height:100,image:"images/watermelon3.png"};
        var yellowDiamond={shape:"diamond", color:"yellow", width:100, height:100,image:"images/passion.png"};
        var blackSquare={shape:"square", color:"black", width:100, height:100,image:"images/blackSquare.png" };

        var slotShapes= [blackSquare, redSquare, redTriangle, redCircle, greenSquare, greenTriangle, greenCircle, blueSquare, blueTriangle, blueCircle, yellowDiamond]


        //attaches event to the drop down!

        document.getElementById("theList").onchange = function() {

            credit = parseInt(document.getElementById("theList").value);

            document.getElementById("credits").value= credit;  

            document.getElementById("theList").disabled = true;

            document.getElementById("theList").value = 0;

            document.getElementById("clickMe").disabled = false;

            document.getElementById("img1").src = slotShapes[Math.floor(Math.random()*9)+1].image;
            document.getElementById("img2").src = slotShapes[Math.floor(Math.random()*9)+1].image;
            document.getElementById("img3").src = slotShapes[Math.floor(Math.random()*9)+1].image;

            document.getElementById("output").innerHTML = "Good luck!!!";


        }

        var threePics=[];

        document.getElementById("clickMe").onclick = function() {

            if (document.getElementById("bet1").checked === true){
                betAmount="1";
            } else if (document.getElementById("bet2").checked === true){
                betAmount="2";
            } else if (document.getElementById("bet3").checked === true){
                betAmount="3";
            }

            credit = credit - betAmount;

            document.getElementById("credits").value= credit;

            for(i = 0; i < 3; i++){
                var random = Math.floor(Math.random()*19)+1;

                switch (random)
                {
                    case 1:
                    case 2:
                        document.getElementById("img" + (i+1)).src = slotShapes[1].image; 
                        threePics[i]= slotShapes[1];
                        break;
                    case 3:
                    case 4:
                        document.getElementById("img" + (i+1)).src = slotShapes[2].image;
                        threePics[i]= slotShapes[2];
                        break;
                    case 5:
                    case 6:
                        document.getElementById("img" + (i+1)).src = slotShapes[3].image;
                        threePics[i]= slotShapes[3];
                        break;
                    case 7:
                    case 8:
                        document.getElementById("img" + (i+1)).src = slotShapes[4].image;
                        threePics[i]= slotShapes[4];
                        break;
                    case 9:
                    case 10:
                        document.getElementById("img" + (i+1)).src = slotShapes[5].image;
                        threePics[i]= slotShapes[5];
                        break;
                    case 11:
                    case 12:
                        document.getElementById("img" + (i+1)).src = slotShapes[6].image;
                        threePics[i]= slotShapes[6];
                        break;
                    case 13:
                    case 14:
                        document.getElementById("img" + (i+1)).src = slotShapes[7].image;
                        threePics[i]= slotShapes[7];
                        break;
                    case 15:
                    case 16:
                        document.getElementById("img" + (i+1)).src = slotShapes[8].image;
                        threePics[i]= slotShapes[8];
                        break;
                    case 17:
                    case 18:
                        document.getElementById("img" + (i+1)).src = slotShapes[9].image;
                        threePics[i]= slotShapes[9];
                        break;
                    case 19:
                        document.getElementById("img" + (i+1)).src = slotShapes[10].image;
                        threePics[i]= slotShapes[10];
                        break;

                    default:
                        break;
                }
            }

            if (threePics[0].color === "yellow" && threePics[1].color === "yellow" && threePics[2].color === "yellow"){

                //jackpot


                } else if (threePics[0].color === "yellow" && threePics[1] === "yellow" ||
                           threePics[0].color === "yellow" && threePics[2] === "yellow" ||
                           threePics[1].color === "yellow" && threePics[2] === "yellow") {

                    document.getElementById("output").innerHTML = "NICE!!! Two diamonds pay " + (TWO_DIAMONDS * betAmount) + " on a bet of " + betAmount;

                } else if (threePics[0].color === "yellow" || threePics[1].color === "yellow" || threePics[2].color === "yellow") {
                    credit = credit + (ONE_DIAMOND * betAmount);

                } else if (threePics[0].shape === threePics[1].shape && threePics[0].shape === threePics[2].shape &&
                           threePics[0].color === threePics[1].color && threePics[0].color === threePics[2].color) {

                    document.getElementById("output").innerHTML = "Same shape and color pays " + (SAME_BOTH * betAmount) + " on a bet of " + betAmount;
                    credit = credit + (SAME_SHAPE * betAmount);

                } 
            else if (threePics[0].shape === threePics[1].shape && threePics[0].shape === threePics[2].shape) {

                      document.getElementById("output").innerHTML = "Same shape pays " + (SAME_SHAPE * betAmount) + " on a bet of " + betAmount;
                    credit = credit + (SAME_SHAPE * betAmount);

                } else if (threePics[0].color === threePics[1].color && threePics[0].color === threePics[2].color) {

                     document.getElementById("output").innerHTML = "Same color pays " + (SAME_COLOR * betAmount) + " on a bet of " + betAmount;
                    credit = credit + (SAME_COLOR * betAmount);
                }
                else {
                    document.getElementById("output").innerHTML = "Too bad. Loss of " + betAmount;
                }



        }
    }

window.onload=function（）{
//全局变量
var信用=0；
var betAmount=0；
var THREE_DIAMONDS=“”；
var TWO_DIAMONDS=“”；
var ONE_DIAMOND=“”；
var SAME_tware=“”；
var SAME_COLOR=“”；
var SAME_SHAPE=“”；
var redSquare={形状：“正方形”，颜色：“红色”，宽度：100，高度：100，图像：“images/apple.png”}；
var blueCircle={形状：“圆形”，颜色：“蓝色”，宽度：100，高度：100，图像：“images/apple2.png”}；
var blueSquare={形状：“正方形”，颜色：“蓝色”，宽度：100，高度：100，图像：“images/apple3.png”}；
var blueTriangle={形状：“三角形”，颜色：“蓝色”，宽度：100，高度：100，图像：“images/cherry.png”}；
var greenCircle={形状：“圆形”，颜色：“绿色”，宽度：100，高度：100，图像：“images/cherry2.png”}；
var greenSquare={形状：“正方形”，颜色：“绿色”，宽度：100，高度：100，图像：“images/cherry3.png”}；
var greenTriangle={形状：“三角形”，颜色：“绿色”，宽度：100，高度：100，图像：“images/西瓜.png”}；
var redCircle={形状：“圆形”，颜色：“红色”，宽度：100，高度：100，图像：“images/watermelon2.png”}；
var redTriangle={形状：“三角形”，颜色：“红色”，宽度：100，高度：100，图像：“images/watermelon3.png”}；
var yellowdommond={形状：“钻石”，颜色：“黄色”，宽度：100，高度：100，图像：“images/passion.png”}；
var blackSquare={形状：“正方形”，颜色：“黑色”，宽度：100，高度：100，图像：“images/blackSquare.png”}；
var slotShapes=[黑色正方形、红色正方形、红色三角形、红色圆圈、绿色正方形、绿色三角形、绿色圆圈、蓝色正方形、蓝色三角形、蓝色圆圈、黄色钻石]
//将事件附加到下拉列表！
document.getElementById（“theList”）.onchange=function（）{
credit=parseInt（document.getElementById（“theList”）.value）；
document.getElementById（“credits”）.value=credit；
document.getElementById（“theList”）.disabled=true；
document.getElementById（“theList”）.value=0；
document.getElementById（“clickMe”）.disabled=false；
document.getElementById（“img1”）.src=slotShapes[Math.floor（Math.random（）*9）+1].image；
document.getElementById（“img2”）.src=slotShapes[Math.floor（Math.random（）*9）+1].image；
document.getElementById（“img3”）.src=slotShapes[Math.floor（Math.random（）*9）+1].image；
document.getElementById（“输出”）.innerHTML=“祝你好运！！！”；
}
var threePics=[]；
document.getElementById（“clickMe”）.onclick=function（）{
if（document.getElementById（“bet1”）.checked==true）{
betAmount=“1”；
}else if（document.getElementById（“bet2”）.checked==true）{
betAmount=“2”；
}else if（document.getElementById（“bet3”）.checked==true）{
betAmount=“3”；
}
信用=信用-金额；
document.getElementById（“credits”）.value=credit；
对于（i=0；i<3；i++）{
var random=Math.floor（Math.random（）*19）+1；
开关（随机）
{
案例1：
案例2：
document.getElementById（“img”+（i+1））.src=slotShapes[1]。图像；
三位数[i]=慢形[1]；
打破
案例3：
案例4：
document.getElementById（“img”+（i+1））.src=slotShapes[2]。图像；
三位数[i]=慢形[2]；
打破
案例5：
案例6：
document.getElementById（“img”+（i+1））.src=slotShapes[3]。图像；
三位数[i]=慢形[3]；
打破
案例7：
案例8：
document.getElementById（“img”+（i+1））.src=slotShapes[4]。图像；
三位数[i]=慢形[4]；
打破
案例9：
案例10：
document.getElementById（“img”+（i+1））.src=slotShapes[5]。图像；
三位数[i]=慢形[5]；
打破
案例11：
案例12：
document.getElementById（“img”+（i+1））.src=slotShapes[6]。图像；
三位数[i]=慢形[6]；
打破
案例13：
案例14：
document.getElementById（“img”+（i+1））.src=slotShapes[7]。图像；
三位数[i]=慢形[7]；
打破
案例15：
案例16：
document.getElementById（“img”+（i+1））.src=slotShapes[8]。图像；
三位数[i]=慢形[8]；
打破
案例17：
案例18：
document.getElementById（“img”+（i+1））.src=slotShapes[9]。图像；
三位数[i]=慢形[9]；
打破
案例19：
document.getElementById（“img”+（i+1））.src=slotShapes[10]。图像；
三位数[i]=慢形[10]；
打破
违约：
打破
}
}
如果（三个图片[0]。颜色==“黄色”和三个图片[1]。颜色==“黄色”和三个图片[2]。颜色==“黄色”）{
//头彩
}else if（三张[0]。颜色==“黄色”&&3
document.getElementById("img" + (i+1)).width = '12px';
document.getElementById("img" + (i+1)).height = '12px';