弧正在绘制直线

Question

首先，我使用弧画一个圆圈并填充它。 （按钮1）

然后，我在上绘制一个矩形和另一个弧并将其填充为红色。 （按钮2）

然而，在第二个功能之后，第一个弧停留在那里并且突然变成红色。帮助

import QtQuick 2.0
import QtQml 2.0

ListView {
    anchors.fill: parent
    model: myModel //this is your main model

    delegate:
        Rectangle {
        height: 100
        width: 100
        color: "red"
        Text {
            id: cc
            text: id
        }

        ListView {
            anchors.fill: parent
            model: mm //the internal QVariantList
            delegate: Rectangle {
                anchors.right:  parent.right
                width: 50
                height: 50
                color: "green"
                border.color: "black"
                Text {
                    text: type //role to get data from internal model
                }
            }
        }
    }
}

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function function1() {
  context.fillStyle = "black";
  context.fillRect(0, 0, 400, 400);
  context.fillStyle = "white";
  context.arc(100, 200, 50, 0, 2*Math.PI);
  context.fill();
}
function function2() {
  context.fillStyle = "black";
  context.fillRect(0, 0, 400, 400);
  context.fillStyle = "red";
  context.arc(300, 200, 50, 0, 2*Math.PI);
  context.fill();
}

Answer 1

OH。哇。我只是像一年前发布的一个问题那样得到了同样的错误，我忘了放context.beginPath();。愚蠢的我。

＆＃13;

＆＃13;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function function1() {
  context.fillStyle = "black";
  context.fillRect(0, 0, 400, 400);
  context.fillStyle = "white";
  context.beginPath();
  context.arc(100, 200, 50, 0, 2*Math.PI);
  context.fill();
}
function function2() {
  context.fillStyle = "black";
  context.fillRect(0, 0, 400, 400);
  context.fillStyle = "red";
  context.beginPath();
  context.arc(300, 200, 50, 0, 2*Math.PI);
  context.fill();
}

＆＃13;

<canvas id="canvas" width="400" height="400" style="border: 1px solid black"></canvas>
<button onClick="function1()">Button 1</button>
<button onClick="function2()">Button 2</button>

＆＃13;

＆＃13;

＆＃13;