javascript - How to draw doughnut with HTML5 canvas -
i draw doughnut within html5 canvas.if background color of canvas solid color, able draw it. it's gradient color, can't draw it.
i know how draw doughnut, when backgroud color of canvas gradient color.
like:
this code:
function background(context, coordinate, properties) { var x = coordinate.x //起始点x , y = coordinate.y //起始点 y , w = coordinate.w //宽度(终点-起始点之间的宽度) , h = coordinate.h //高度(终点-起始点之间的高度) , gradientfactor, gradientcolor; //渐变因子, 渐变色 context.save(); switch( properties["background-fill-type"] ) { case "solid": context.fillstyle = properties["background-color"]; break; case "gradient": gradientfactor = properties["background-gradient-factor"]; gradientcolor = context.createlineargradient(x, y, x + w, y); gradientcolor.addcolorstop(gradientfactor, properties["background-first-color"]); gradientcolor.addcolorstop(1 - gradientfactor, properties["background-second-color"]); context.fillstyle = gradientcolor; break; case "image": break; } context.fillrect(x, y, w, h); context.restore(); } - if background color of canvas solid color:
var context = canvas.getcontext("2d") , properties = { "background-fill-type": "solid", //solid color "background-color": "#ffffff", "background-first-color": "#008b8b", "background-second-color": "#f5deb3", "background-gradient-factor": 0.5, "border-color": "#ffffff", "border-thickness": 0 }; //draw canvas background (solid color) background(context, { x: 0, y: 0, w: properties["width"], h: properties["height"] }, properties); //draw doughnut context.save(); context.beginpath(); context.translate(centerx, centery); context.arc(0, 0, radius, 0, dpi, false); //外部圆 context.fillstyle = "blue"; context.fill(); context.closepath(); context.beginpath(); context.arc(0, 0, radius, 0, dpi, false); //内部圆 context.fillstyle = properties["background-color"]; context.fill(); context.closepath(); context.restore(); - if background color of canvas gradient color:
var context = canvas.getcontext("2d") , properties = { "background-fill-type": "gradient", //gradient color "background-color": "#ffffff", "background-first-color": "#008b8b", "background-second-color": "#f5deb3", "background-gradient-factor": 0.5, "border-color": "#ffffff", "border-thickness": 0 }; //draw canvas background (gradient color) background(context, { x: 0, y: 0, w: properties["width"], h: properties["height"] }, properties); //draw doughnut context.save(); context.beginpath(); context.translate(centerx, centery); context.arc(0, 0, radius, 0, dpi, false); //外部圆 context.fillstyle = "blue"; context.fill(); context.closepath(); context.beginpath(); context.arc(0, 0, radius, 0, dpi, false); //内部圆 //context.fillstyle = properties["background-color"]; // *----------------------------------------------------------------------* // | how solve internal circle , canvas background color consistent? | // | // *----------------------------------------------------------------------* context.fill(); context.closepath(); context.restore(); this effect diagram.( little crooked, - -! ):
drawing data-donut gradient background
your donut circle center cut out.
so draw outer circle , draw inner circle cut donut.
to display data, outer circle can assembled arcs sweeps indicate data ( called wedges).
you can draw individual wedges supplying starting , ending angles of arc (in radians).
ctx.arc(cx, cy, radius, startradians, endradians, false); fill both canvas , inner circle same gradient display consistent gradient.
here code , fiddle: http://jsfiddle.net/m1erickson/enzd9/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); // define donut var cx = math.floor(canvas.width / 2); var cy = math.floor(canvas.height / 2); var radius = math.min(cx,cy)*.75; // datapoints var data=[]; data.push(67.34); data.push(28.60); data.push(1.78); data.push(.84); data.push(.74); data.push(.70); // colors use each datapoint var colors=[]; colors.push("teal"); colors.push("rgb(165,42,42)"); colors.push("purple"); colors.push("green"); colors.push("cyan"); colors.push("gold"); // track accumulated arcs drawn far var totalarc=0; // draw wedge function drawwedge2(percent, color) { // calc size of our wedge in radians var wedgeinradians=percent/100*360 *math.pi/180; // draw wedge ctx.save(); ctx.beginpath(); ctx.moveto(cx, cy); ctx.arc(cx, cy, radius, totalarc, totalarc+wedgeinradians, false); ctx.closepath(); ctx.fillstyle = color; ctx.fill(); ctx.restore(); // sum size of wedges far // begin our next wedge @ sum totalarc+=wedgeinradians; } // draw donut 1 wedge @ time function drawdonut(){ for(var i=0;i<data.length;i++){ drawwedge2(data[i],colors[i]); } // cut out inner-circle == donut ctx.beginpath(); ctx.moveto(cx,cy); ctx.fillstyle=gradient; ctx.arc(cx, cy, radius*.60, 0, 2 * math.pi, false); ctx.fill(); } // draw background gradient var gradient = ctx.createlineargradient(0,0,canvas.width,0); gradient.addcolorstop(0, "#008b8b"); gradient.addcolorstop(0.75, "#f5deb3"); ctx.fillstyle = gradient; ctx.fillrect(0,0,canvas.width,canvas.height); // draw donut drawdonut(); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=400 height=300></canvas> </body> </html>
Comments
Post a Comment