Question

我正在尝试在div id“myCanvas”上画一条画布线，但问题是这条线变得非常低分辨率并且它没有显示平滑线。如何提高线路分辨率？并使它顺利？

JS：

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

      var grd = context.createLinearGradient(100, 150, canvas.width, canvas.height);
      grd.addColorStop(0, '#0132bf');
      grd.addColorStop(1, '#ccd9ff');
      context.fillStyle = grd;
      context.fill();

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.lineTo(-10, 190);
      context.bezierCurveTo(200, -100, 500, 200, 400, 150);

      context.lineWidth = .9;
      context.strokeStyle = '#ccd9ff';
      context.stroke();

jsfiddle link

Answer 1

尝试提供符合您要求的画布HTML元素宽度和高度属性，例如：

 <canvas id="myCanvas" width="600" height="600">

画布分辨率不好

1 个答案: