时间戳

首页 > 解决方案 > 我的 chrome 扩展只显示它应该显示的部分形状

javascript - 我的 chrome 扩展只显示它应该显示的部分形状

问题描述

我正在尝试创建一个显示魔术 8 球的 chrome 扩展。但是，当我打开扩展程序时。只有一小部分应该显示的内容显示（下图）。

这就是我的扩展程序的显示方式

我的代码显示在下面。

popup.html

<!DOCTYPE html>
<html>
<body>

<script src="./p5.min.js"></script>
    
<script src="./popup.js"></script>

</body>
</html>

popup.js

function setup() {
fill(0, 0, 0);

ellipse(200, 200, 375, 375);

fill(60, 0, 255);

triangle(200, 104, 280, 280, 120, 280);

fill(255, 255, 255);
   
var answer = random(1, 20);

if (answer === 1) {

    text("As I see it,", 171, 200);

    text("yes", 189, 229); 

}

else if (answer === 2) {

    text("Ask again", 171, 200);

    text("later", 189, 229); 

}

else if (answer === 3) {

    text("Better not ", 171, 200);

    text("tell you now", 169, 229); 

}

else if (answer === 4) {

    text("Cannot", 180, 200);

    text("predict now", 172, 229); 

}

else if (answer === 5) {

    text("Concentrate", 169, 200);

    text("and ask again", 165, 229); 

}

else if (answer === 6) {

    text("Don't count", 171, 200);

    text("on it", 189, 229); 

}

else if (answer === 7) {

    text("It is", 191, 200);

    text("certain", 183, 229); 

}

else if (answer === 8) {

    text("It is", 193, 200);

    text("decidedly so", 169, 229); 

}

else if (answer === 9) {

    text("Most", 187, 200);

    text("likely", 186, 229); 

}

else if (answer === 10) {

    text("My reply is", 171, 200);

    text("no", 193, 229); 

}

else if (answer === 11) {

    text("My sources", 171, 200);

    text("say no", 184, 229); 

}

else if (answer === 12) {

    text("Outlook", 178, 200);

    text("not so good", 171, 229); 

}

else if (answer === 13) {

    text("Outlook", 180, 200);

    text("good", 185, 229); 

}

else if (answer === 14) {

    text("Reply hazy,", 170, 200);

    text("try again", 178, 229); 

}

else if (answer === 15) {

    text("Signs point", 170, 200);

    text("to yes", 184, 229); 

}

else if (answer === 16) {

    text("Very", 187, 200);

    text("doubtful", 180, 229); 

}

else if (answer === 17) {

    text("Without", 180, 200);

    text("a doubt", 181, 229); 

}

else if (answer === 18) {

    text("Yes", 189, 229); 

}

else if (answer === 19) {

    text("Yes - definitely", 164, 229); 

}

else {

    text("You may", 175, 200);

    text("rely on it", 177, 229); 

}
}

p5.min.js 包含在与我的 popup.html 和 popup.js 相同的文件夹中

我尝试使用 CSS 使画布更大，以便显示更多的 8 个球，但这只会增加更多的空白。

标签： javascripthtmljsongoogle-chrome-extension

解决方案

推荐阅读