在 Primeng Carousel 中放置 chart.js Donut Chart 时，canvas 中的文本似乎 blurred/distorted 有点

Question

在 Primeng Carousel 中放置 chart.js Donut Chart 时，canvas 中的文本看起来 blurred/distorted 有点。我在正常 div 中实现了具有相同 canvas 大小的相同类型的图表，但文本没有失真。

我试过将浏览器的缩放大小更改为 >100% 和 <100% ，但仍然存在同样的问题

 <div class="row" style="padding: 15px;">
    <div class="col-md-12" style="border: 1px solid rgb(228,232,239);" *ngIf="isCardDataloaded">
  <p-carousel [value]="defectsMetricsList" [numVisible]="4" [pageLinks]="4" [responsive]="true">
    <ng-template let-defectMetric pTemplate="item">
      <div class="ui-grid ui-grid-responsive border-style"
        [ngStyle]="{ 'background-color': defectMetric.bgColor1 }">
        <!-- <a id="on-click" (click)="onInitClick(defectMetric.name)"> -->
        <div class="ui-grid-row half-padding border-style" [ngStyle]="{ 'background-color': defectMetric.bgColor }">
          <div class="ui-grid-col-12 half-margin-top pull-left">
            <span class="font-header-style" style="color: white;">{{defectMetric.name}}</span>
          </div>
          <button class="pull-right" style="color: white;" type="button" mat-button mat-icon-button
            (click)="onInitClick(defectMetric.name)">
            <mat-icon>call_made</mat-icon>
          </button>
        </div>
        <div class="ui-grid-row half-padding border-style" [ngStyle]="{ 'background-color': defectMetric.bgColor }">
            <div class="ui-grid-col-2"></div>
           <div class="ui-grid-col-8  text-center">
            <canvas  width="215px" height="215px" id="{{ 'myChart' + defectMetric.index }}"></canvas>
          </div>
          <div class="ui-grid-col-2"></div>

        </div>
        <div class="ui-grid-row half-padding border-style text-centre">

           <div class="ui-grid-col-12  text-center custom-dark-grey" style="font-size: 16px">
           Total issues are {{defectMetric.Total}}
          </div>

        </div>

      </div>
    </ng-template>
  </p-carousel>
  </div>
  </div>[![enter image description here][1]][1]

Answer 1

问题是 - 由于轮播中的循环，canvas 一次又一次地重新绘制自己，所以图像看起来有点模糊，我所做的是 ctx = chart.chart.ctx; ctx.clearRect(0,0,chart.chart.width,chart.chart.height);在 beforeDraw 方法中。

在 Primeng Carousel 中放置 chart.js Donut Chart 时，canvas 中的文本似乎 blurred/distorted 有点

While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit

html5-canvas

chart.js

primeng

angular

angular5