javascript - Html 5 canvas trouble -
i'm trying practice html5 canvas drawing came this. should result in yellow star overlapped green silhouette of bust (the head , shoulders of person).
however if drawstar() line un-commented, green silhouette not drawn. working code not important explanation of happening.
http://jsfiddle.net/xiondark2008/lyfhj/2/
html:
<!doctype html> <html> <head> <style> h6{ -webkit-margin-before: .5em; -webkit-margin-after: 0; } label{ margin-left: 1em; } </style> </head> <body> <canvas id="mycanvas" width="19" height="19" style="border:1px solid d3d3d3;"> browser not support html5 canvas tag.</canvas> </body> </html> javascript:
function drawprofile(ctx,x,y,width,height) { this.flp = false; this.x = function(r){ return math.floor(width*(this.flp?1-r:r)); } this.y = function(r){ return math.floor(height*r); } ctx.save(); ctx.translate( x, y ); ctx.fillstyle="#40ff00"; ctx.beginpath(); ctx.moveto( this.x(0), this.y(1) ); ctx.beziercurveto( this.x(0), this.y(125/190), this.x(70/190), this.y(170/190), this.x(75/190), this.y(120/190) ); ctx.lineto( this.x(95/190), this.y(130/190) ); ctx.beziercurveto( this.x(40/190), this.y(130/190), this.x(30/190), this.y(0), this.x(95/190), this.y(0) ); this.flp = true; ctx.beziercurveto( this.x(30/190), this.y(0), this.x(40/190), this.y(130/190), this.x(95/190), this.y(130/190) ); ctx.lineto( this.x(75/190), this.y(120/190) ); ctx.beziercurveto( this.x(70/190), this.y(170/190), this.x(0), this.y(125/190), this.x(0), this.y(1) ); ctx.fill(); this.flp = false; ctx.restore(); } function drawstar(ctx,x,y,height) { var pnts = 5, rad = height/(1-math.cos(0.8*math.pi)); this.x = function(p,dst){ return dst * math.sin( (p/pnts)*2*math.pi ); } this.y = function(p,dst){ return dst * math.cos( (p/pnts)*2*math.pi ) * -1; } this.movepct = function(a,b,pct){ var f = (function(x){ var m = (b.y-a.y)/(b.x-a.x); return m*x+(a.y-(a.x*m)); }).bind(), r = b.x - a.x, point = {}; point.x = a.x+(r*pct); point.y = f(point.x); return point; } this.transpoints = function(s,p,e,pct){ var sp = this.movepct(s,p,pct), ep = this.movepct(e,p,pct); return [sp,ep]; } ctx.save(); ctx.translate( x+rad, y+rad ); ctx.fillstyle = "#ffff00"; ctx.beginpath(); for(var i=0;i<pnts;i++){ var dst = rad/2, s = { x: this.x( i+0.5, dst ), y: this.y( i+0.5, dst ) }, p = { x: this.x( i+1, rad ), y: this.y( i+1, rad ) }, e = { x: this.x( i+1.5, dst ), y: this.y( i+1.5, dst ) }, t = this.transpoints(s,p,e,.75); if(i==0){ ctx.moveto( s.x, s.y ); } ctx.lineto(t[0].x, t[0].y); ctx.quadraticcurveto(p.x, p.y, t[1].x, t[1].y); ctx.lineto(e.x, e.y); } ctx.fill(); ctx.restore(); } function draw(c) { var ctx = c.getcontext("2d"); this.x = function(r){ return c.width*r; } this.y = function(r){ return c.height*r; } ctx.shadowblur=this.y(1/19); ctx.shadowcolor="black"; //drawstar( ctx, this.x(-3/19), this.y(-1/19), this.y(20/19) ); drawprofile( ctx, this.x(6/19), this.y(1/19), this.x(18/19), this.y(18/19) ); if(0){ ctx.clearrect( this.x(1), this.y(0), this.x(1), this.y(1) ); ctx.clearrect( this.x(0), this.y(1), this.x(1), this.y(1) ); } } draw( document.getelementbyid("mycanvas") );
you're using this in functions. in context here, this bound window (there lots of resources out there how use this, , you're doing incorrectly).
in each function use this, is bound same thing (window) over-write each other's variables. (this because of way you're using functions. if newed them different story).
so
- your
draw()method setsthis.x,window.x, - then passes
drawstar()argument - the
drawstar()function method changes value ofthis.x(whichwindow.x) , returnsdraw() - then
draw()callsdrawprofile()this.x(whichwindow.x), except time value function rather float value wanted be. - drawprofile expected argument float, it's function
(for x read x , y)
you can closures , variables. remove thises , program work. probably.
Comments
Post a Comment