javascript - Trying to draw a pattern divided to a few parts with html5 canvas -
i need draw html5 canvas shape, i'm able draw 1 canvas.
i need handle each part of unique object - listen mouse on each part, determine on of parts user hovering mouse on, , let user option fill relevant part of shape.
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; (var = 0; < 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 x starting point }; context.linewidth = 5; context.strokestyle = "red"; context.stroke();
i suggest using createjs. make life whole lot easier while working canvas.
here demo of how handle each shape object createjs.
click on individual shape see how each 1 triggers it's own handler.
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 " + shape.name); }); return shape; } var stage = new createjs.stage("shape"); for(var = 0; < 4; i++) stage.addchild(new curveshape(i+1, * 80, (i + 1) * 80)); stage.update(); 
Comments
Post a Comment