Question

我想在HTML5画布上绘制类似this mentioned here的曲线。有人可以指出我应该使用什么方法。

Answer 1

看起来像-sin，所以您可以执行以下操作：

let cnvs = document.getElementById('cnvs')
let ctx = cnvs.getContext('2d');
ctx.beginPath();
for (let i = 0; i < cnvs.width; i++){
    ctx.lineTo(i, cnvs.height/2-Math.sin(i*(Math.PI/180))*50);
}
ctx.stroke()

<canvas id='cnvs'></canvas>

所以他们的想法是将曲线表示为x（这里是-sin(x)）的某个函数，然后使用渲染上下文的lineTo方法在不同点之间绘制线那条曲线。只要您每隔几个像素递增一次（这里1就很好），那么您将获得漂亮的平滑图形效果。

Answer 2

另一种实现方法是使用the method bezierCurveTo

markers_index = Array.new        
@events.each_with_index do |event, index|
...

        markers_index << {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [event.longitude, event.latitude]
          },
          properties: {
            markerurl: event.photo.marker.url,
            divclass: marker_class,
            popupContent: has_popup ? marker_popup : nil
          }
        }
    end

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 536;
let ch = canvas.height = 100;
   
ctx.beginPath();
ctx.moveTo(0,28)
ctx.bezierCurveTo(0,28,31,7,70,8);
ctx.bezierCurveTo(109,9,313,99,425,90);
ctx.bezierCurveTo(516,82.5,536,55,536,55);
ctx.stroke();

canvas{border:1px solid #d9d9d9;}

HTML5 Canvas中的曲线绘制

2 个答案: