Question

我使用的HTML非常简单，如下所示：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
    <script src="sketch.js"></script>
</head>
<body>

</body>
</html>

sketch.js文件在此处：

function setup() {
    createCanvas(500, 500);
}

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
    clear();
}

我完全按照示例中的方法进行操作，但是清除仅在其中的一部分上起作用，而不是整个画布上。我在不同的PC上的不同浏览器中进行了尝试，其中一些工作良好，而有些则行不通。同样，所有移动Chrome浏览器都存在相同的问题。

下面是它在浏览器中的屏幕截图：

Answer 1

这似乎是p5.js中的一个已知错误，会影响视网膜屏幕-https://github.com/processing/p5.js/issues/2846

https://github.com/processing/p5.js/pull/2852已经有修复程序，但在撰写本文时尚未发布。

在过渡期间使用$("canvas")[0].getContext('2d').clearRect(0,0,width,height);而不是调用clear方法将具有所需的效果。例如：

function setup() {
    createCanvas(500, 500);
}

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
    $("canvas")[0].getContext('2d').clearRect(0,0,width,height);
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>

Answer 2

另一种选择是调用pixelDensity(1)函数：

function setup() {
    pixelDensity(1);
    createCanvas(500, 500);
}

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
    clear();
}

更多信息可以在the reference中找到：

默认情况下，像素密度设置为与显示密度匹配，请调用pixelDensity(1)将其关闭。

p5.js clear（）函数在移动设备和某些浏览器中无法正常工作

2 个答案:

p5.j​​s clear（）函数在移动设备和某些浏览器中无法正常工作

2 个答案:

p5.js clear（）函数在移动设备和某些浏览器中无法正常工作