javascript - 尝试用 html5 canvas 绘制一个分成几个部分的图案

Question

我需要用 html5 canvas 绘制这个形状，我可以将它绘制为一个 Canvas 。

我需要将每个部分作为一个独特的对象来处理 - 听取每个部分上的鼠标，确定用户将鼠标悬停在哪个部分上，并让用户选择填充相关部分形状。

var canvas = document.getElementById('shape');
var context = canvas.getContext('2d'),
width = $('#shape').width(),
part_width = width / parts_num;

context.beginPath();

var start_x = 17,
end_x = 17 + part_width;
for (var i = 0; i < parts_num; i++) {
context.moveTo(start_x, 0); 
context.lineTo(end_x,0);
context.moveTo(start_x, 0);
context.bezierCurveTo(50+start_x, 30, 40+start_x, 45, 13+start_x, 89);
context.moveTo(13+start_x, 89);
context.bezierCurveTo(0+start_x, 110, 0+start_x, 126, 27+start_x, 174);
context.moveTo(28+start_x, 174);
context.lineTo(85+start_x,174);
start_x += part_width;//80 is x starting point
};
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();

Answer 1

我建议使用 CreateJS .使用 Canvas 会让您的生活变得更加轻松。

这是一个Demo了解如何使用 CreateJS 将每个形状作为对象处理。

单击单个形状以查看每个形状如何触发其自己的处理程序。

function curveShape(index, start_x, end_x) {
    var shape = new createjs.Shape();
    var context = shape.graphics.beginStroke("red").beginFill("#ffffee");    
    context.moveTo(start_x, 0);
    context.bezierCurveTo(start_x + 10, 30, start_x + 10, 45, start_x - 15, 90);
    context.bezierCurveTo(start_x - 30, 120, start_x - 30, 135, start_x, 180);
    context.lineTo(end_x, 180);
    context.bezierCurveTo(end_x - 30, 135, end_x - 30, 120, end_x - 15, 90);
    context.bezierCurveTo(end_x + 10, 45, end_x + 10, 30, end_x, 0);
    context.lineTo(start_x, 0);

    shape.name = "shape " + index;
    shape.x = shape.y = 30;
    shape.addEventListener("mousedown", function () {
        alert("I am " + shape.name);
    });

    return shape;
}

var stage = new createjs.Stage("shape");    

for(var i = 0; i < 4; i++) 
    stage.addChild(new curveShape(i+1, i * 80, (i + 1) * 80));   

stage.update();