1.绘制圆角矩形
方法一：
hint:使用arc方法，（arcTo绘制的矩形在IE9上显示异常）。
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas test</title> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 9 //your code 10 ... 11 }; 12 13 </script> 14 </head> 15 <body> 16 <canvas id="canvas" height="400" width="600" style="border:1px solid #000000;">Your browser does not support HTML5 Canvas 17 </canvas> 18 <br/>canvas画布宽600px，高400px 19 </body></html>
1 function drawRoundedRect(ctx,x,y,width,height,cornerRadius,fillStyle) { 2 ctx.beginPath(); 3 cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); 4 cxt.lineTo(width - radius + x, y); 5 cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); 6 cxt.lineTo(width + x, height + y - radius); 7 cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); 8 cxt.lineTo(radius + x, height +y); 9 cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); 10 cxt.closePath(); 11 ctx.fillStyle = fillStyle; 12 ctx.fill(); 13 }
方法二:
使用quadraticCurveTo方法，代码是从zrender源码中提取的
1 function drawRoundrect(ctx, x, y, width, height, r, fillStyle){ 2 var r1; 3 var r2; 4 var r3; 5 var r4; 6 7 // Convert width and height to positive for better borderRadius 8 if (width < 0) { 9 x = x + width; 10 width = -width; 11 } 12 if (height < 0) { 13 y = y + height; 14 height = -height; 15 } 16 17 if (typeof r === 'number') { 18 r1 = r2 = r3 = r4 = r; 19 } 20 else if (r instanceof Array) { 21 if (r.length === 1) { 22 r1 = r2 = r3 = r4 = r[0]; 23 } 24 else if (r.length === 2) { 25 r1 = r3 = r[0]; 26 r2 = r4 = r[1]; 27 } 28 else if (r.length === 3) { 29 r1 = r[0]; 30 r2 = r4 = r[1]; 31 r3 = r[2]; 32 } 33 else { 34 r1 = r[0]; 35 r2 = r[1]; 36 r3 = r[2]; 37 r4 = r[3]; 38 } 39 } 40 else { 41 r1 = r2 = r3 = r4 = 0; 42 } 43 44 var total; 45 if (r1 + r2 > width) { 46 total = r1 + r2; 47 r1 *= width / total; 48 r2 *= width / total; 49 } 50 if (r3 + r4 > width) { 51 total = r3 + r4; 52 r3 *= width / total; 53 r4 *= width / total; 54 } 55 if (r2 + r3 > height) { 56 total = r2 + r3; 57 r2 *= height / total; 58 r3 *= height / total; 59 } 60 if (r1 + r4 > height) { 61 total = r1 + r4; 62 r1 *= height / total; 63 r4 *= height / total; 64 } 65 ctx.beginPath(); 66 ctx.moveTo(x + r1, y); 67 ctx.lineTo(x + width - r2, y); 68 r2 !== 0 && ctx.quadraticCurveTo( 69 x + width, y, x + width, y + r2 70 ); 71 ctx.lineTo(x + width, y + height - r3); 72 r3 !== 0 && ctx.quadraticCurveTo( 73 x + width, y + height, x + width - r3, y + height 74 ); 75 ctx.lineTo(x + r4, y + height); 76 r4 !== 0 && ctx.quadraticCurveTo( 77 x, y + height, x, y + height - r4 78 ); 79 ctx.lineTo(x, y + r1); 80 r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y); 81 82 ctx.lineWidth = 0; 83 ctx.fillStyle = fillStyle; 84 ctx.fill(); 85 ctx.closePath(); 86 }
效果图：
