Project

General

Profile

canvas_drawing_example_20150721.html

Greg Shah, 07/21/2015 06:20 PM

Download (4.87 KB)

 
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
   <head>
4 
      <meta charset="utf-8" />
5 
      <title>Canvas Drawing Example</title>
6
7 
      <script>
8 
         var canvas;
9
10 
         var ctx;
11
12 
         //
13 
         // Draw a rounded rectangle with the given context, dimensions and fill.
14 
         //
15 
         // @param    {CanvasRenderingContext2D} ctx
16 
         //           The canvas 2D graphics context.
17 
         // @param    {Number} x
18 
         //           X coordinate of the top left of the rectangle (if a square corner was placed
19 
         //           there).
20 
         // @param    {Number} y
21 
         //           Y coordinate of the top left of the rectangle (if a square corner was placed
22 
         //           there).
23 
         // @param    {Number} width
24 
         //           Width of the rectangle.
25 
         // @param    {Number} height
26 
         //           Height of the rectangle.
27 
         // @param    {Number} diameter
28 
         //           Diameter of the arc that defines the rounded corner.
29 
         // @param    {Boolean} fill
30 
         //           <code>true</code> to fill the rectangle with the current color, otherwise just
31 
         //           stroke the rectangle.
32 
         //
33 
         function createRoundRect(ctx, x, y, width, height, diameter, fill)
34 
         {
35 
            var radius = diameter / 2;
36
37 
            // arc control points
38 
            var northWestX = x;
39 
            var northWestY = y;
40 
            var northEastX = x + width;
41 
            var northEastY = y;
42 
            var southWestX = x;
43 
            var southWestY = y + height;
44 
            var southEastX = x + width;
45 
            var southEastY = y + height;
46
47 
            // line end points
48 
            var topLeftX     = northWestX + radius;
49 
            var topLeftY     = northWestY;
50 
            var topRightX    = northEastX - radius;
51 
            var topRightY    = northEastY;
52 
            var rightUpX     = northEastX;
53 
            var rightUpY     = northEastY + radius;
54 
            var rightDownX   = southEastX;
55 
            var rightDownY   = southEastY - radius;
56 
            var bottomRightX = southEastX - radius;
57 
            var bottomRightY = southEastY;
58 
            var bottomLeftX  = southWestX + radius;
59 
            var bottomLeftY  = southWestY;
60 
            var leftDownX    = southWestX;
61 
            var leftDownY    = southWestY - radius;
62 
            var leftUpX      = northWestX;
63 
            var leftUpY      = northWestY + radius;
64
65 
            ctx.beginPath();
66 
            ctx.moveTo(topRightX, topRightY);
67 
            ctx.quadraticCurveTo(northEastX, northEastY, rightUpX, rightUpY);
68 
            ctx.lineTo(rightDownX, rightDownY);
69 
            ctx.quadraticCurveTo(southEastX, southEastY, bottomRightX, bottomRightY);
70 
            ctx.lineTo(bottomLeftX, bottomLeftY);
71 
            ctx.quadraticCurveTo(southWestX, southWestY, leftDownX, leftDownY);
72 
            ctx.lineTo(leftUpX, leftUpY);
73 
            ctx.quadraticCurveTo(northWestX, northWestY, topLeftX, topLeftY);
74 
            ctx.closePath();
75
76 
            if (fill)
77 
            {
78 
               ctx.fill();
79 
            }
80 
            else
81 
            {
82 
               ctx.stroke();
83 
            }
84 
         }
85
86 
         window.onload=function()
87 
         {
88 
            canvas = document.getElementById("bogus");
89 
            ctx = canvas.getContext('2d');
90
91 
            canvas.top = 150;
92 
            canvas.left = 150;
93 
            canvas.width = 550;
94 
            canvas.height = 550;
95
96 
            ctx.lineWidth = 1;
97 
            ctx.beginPath();
98 
            ctx.moveTo(10, 10);
99 
            ctx.lineTo(540, 30);
100 
            ctx.stroke();
101
102 
            ctx.strokeRect(40, 40, 55, 30);
103 
            ctx.fillRect(150, 40, 55, 30);
104
105 
            createRoundRect(ctx, 40, 90, 55, 30, 5, false);
106 
            createRoundRect(ctx, 40, 130, 55, 30, 5, true);
107 
            createRoundRect(ctx, 110, 90, 55, 30, 8, false);
108 
            createRoundRect(ctx, 110, 130, 55, 30, 8, true);
109 
            createRoundRect(ctx, 180, 90, 55, 30, 10, false);
110 
            createRoundRect(ctx, 180, 130, 55, 30, 10, true);
111 
            createRoundRect(ctx, 250, 90, 55, 30, 15, false);
112 
            createRoundRect(ctx, 250, 130, 55, 30, 15, true);
113 
            createRoundRect(ctx, 320, 90, 55, 30, 20, false);
114 
            createRoundRect(ctx, 320, 130, 55, 30, 20, true);
115 
            createRoundRect(ctx, 390, 90, 55, 30, 25, false);
116 
            createRoundRect(ctx, 390, 130, 55, 30, 25, true);
117 
            createRoundRect(ctx, 460, 90, 55, 30, 30, false);
118 
            createRoundRect(ctx, 460, 130, 55, 30, 30, true);
119 
         };
120 
      </script>
121 
   </head>
122 
   <body>
123 
      <canvas id="bogus" style="position:'absolute';background-color:#EEEEEE">No HTML5 support in your browser!</canvas>
124 
   </body>
125 
</html>