canvas学习笔记：绘制各种图形

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 }

效果图：

posted on 2017-06-01 09:55 DavidXu2014 阅读(345) 评论(0) 收藏举报