javascript - HTML5 Canvas bezier curves - background does not want to load -
is there able me script? see jsfiddle.net/7qmsz/3.
html:
<canvas id="canvas" height="1000" width="1000" class="bezier" style="cursor: default;"></canvas> css:
#canvas { position: absolute; left: 100px; top: 100px; background-color: rgba(255, 255, 255, 0.1); } javascript:
(function() { var canvas; var ctx; var code; var point; var style; var drag = null; var dpoint; function init(quadratic) { point = { p1: { x:50, y:100 }, p2: { x:200, y:100 }, p3: { x:50 , y:100 }, p4: { x:200 , y:100 } }; if (quadratic) { point.cp1 = { x: 50, y: 50 }; point.cp3 = { x: 250, y: -110 }; } else { point.cp1 = { x: 50, y: 10 }; point.cp2 = { x: 200, y: 10 }; point.cp3 = { x: 50, y: 190 }; point.cp4 = { x: 200, y: 190 }; } style = { curve: { width: 2, color: "#c0c0c0" }, cpline: { width: 1, color: "#c0c0c0" }, point: { radius: 3, width: 1, color: "#c0c0c0", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * math.pi }, } ctx.linecap = "round"; ctx.linejoin = "round"; canvas.onmousedown = dragstart; canvas.onmousemove = dragging; canvas.onmouseup = canvas.onmouseout = dragend; drawcanvas(); } function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.linewidth = style.cpline.width; ctx.strokestyle = style.cpline.color; ctx.beginpath(); ctx.moveto(point.p1.x, point.p1.y); ctx.lineto(point.cp1.x, point.cp1.y); if (point.cp2) { ctx.moveto(point.p2.x, point.p2.y); ctx.lineto(point.cp2.x, point.cp2.y); } else { ctx.lineto(point.p2.x, point.p2.y); } ctx.stroke(); ctx.linewidth = style.cpline.width; ctx.strokestyle = style.cpline.color; ctx.beginpath(); ctx.moveto(point.p3.x, point.p3.y); ctx.lineto(point.cp3.x, point.cp3.y); if (point.cp2) { ctx.moveto(point.p4.x, point.p4.y); ctx.lineto(point.cp4.x, point.cp4.y); } else { ctx.lineto(point.p4.x, point.p4.y); } ctx.stroke(); ctx.linewidth = style.curve.width; ctx.strokestyle = style.curve.color; ctx.beginpath(); ctx.moveto(point.p1.x, point.p1.y); if (point.cp2) { ctx.beziercurveto(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y); } else { ctx.quadraticcurveto(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y); } var img = new image(); img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg'; var pattern = ctx.createpattern(img, 'repeat') ctx.globalalpha = "1"; ctx.fillstyle = pattern; ctx.fill(); ctx.stroke(); ctx.linewidth = style.curve.width; ctx.strokestyle = style.curve.color; ctx.beginpath(); ctx.moveto(point.p3.x, point.p3.y); if (point.cp3) { ctx.beziercurveto(point.cp3.x, point.cp3.y, point.cp4.x, point.cp4.y, point.p4.x, point.p4.y); } else { ctx.quadraticcurveto(point.cp3.x, point.cp3.y, point.p4.x, point.p4.y); } var img = new image(); img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg'; var pattern = ctx.createpattern(img, 'repeat') ctx.globalalpha = "1"; ctx.fillstyle = pattern; ctx.fill(); ctx.stroke(); (var p in point) { if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4') { ctx.linewidth = style.point.width; ctx.strokestyle = style.point.color; ctx.fillstyle = style.point.fill; ctx.beginpath(); ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true); ctx.fill(); ctx.stroke(); } else { ctx.linewidth = style.point.width; ctx.strokestyle = style.point.color; ctx.fillstyle = style.point.fill; ctx.beginpath(); ctx.rect(point[p].x - 4, point[p].y - 4, 7, 7); ctx.fill(); ctx.stroke(); } } } function dragstart(e) { e = mousepos(e); var dx, dy; (var p in point) { dx = point[p].x - e.x; dy = point[p].y - e.y; if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) { if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4') { drag = p; dpoint = e; canvas.style.cursor = "move"; } return; } } } function dragging(e) { if (drag) { e = mousepos(e); point[drag].x += e.x - dpoint.x; point[drag].y += e.y - dpoint.y; dpoint = e; drawcanvas(); } } function dragend(e) { drag = null; canvas.style.cursor = "default"; drawcanvas(); } function mousepos(event) { event = (event ? event : window.event); return { x: event.pagex - canvas.offsetleft, y: event.pagey - canvas.offsettop } } canvas = document.getelementbyid("canvas"); if (canvas.getcontext) { ctx = canvas.getcontext("2d"); init(canvas.classname == "quadratic"); } })(); the problem when first load page or refresh browser, script not load background image. instead default background displayed. don't know problem is.
you're not waiting image finish downloading first, canvas run through rest of code while image isn't available yet. force load first, either having <img> element image src prior canvas, or first create image(), give onload handler, , set src attribute, onload handler calling canvas's code.
Comments
Post a Comment