1.

 

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas draws two rectangles</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')}; $.extend(myAction, {initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.fillStyle = "rgb(200,0,0)";
                ctx.fillRect (10.10.55.50);
                ctx.fillStyle = "Rgba (0, 0, 200, 0.5)";
                ctx.fillRect (30.30.55.50); }});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code

 

 

 

2.

 

 

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')}; $.extend(myAction, {initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.fillRect(10.10.100.50);  // Draw a rectangle with the default color of black
                //ctx.strokeStyle = '#ff0000';
                ctx.strokeRect(10.70.100.50);  // Draw a rectangle border}});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code

ctx.clearRect(15.15.50.25);
Copy the code

3.

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')}; $.extend(myAction, {initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.moveTo(50.50);
                ctx.lineTo(200.50);
                ctx.lineTo(200.200);
                ctx.closePath(); // Even though we only drew two lines, closePath will still be a closePath
                //ctx.stroke(); / / stroke. Stroke does not automatically closePath()
                ctx.fill(); // Fill the closed region. If path is not closed, fill() automatically closes the path.}});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code

4.

arc(x, y, r, startAngle, endAngle, anticlockwise):

With (x, y) as the center and r as the radius, starting at startAngle radian and ending at endAngle radian. Anticlosewise is a Boolean value with true and false anticlosewise. (Clockwise by default)

Note:

Radians =(math.pi /180)*degrees // Convert Angle to radiansCopy the code
  1. All of these degrees are radians.
  2. 0PI radians is PIxAxis of the square

 

arcTo(x1, y1, x2, y2, radius):

Draw an arc according to the given control point and radius, and finally connect the two control points in a straight line.

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')}; $.extend(myAction, {initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.arc(50.50.40.0.Math.PI / 2.false);
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(150.50.40.0, -Math.PI / 2.true);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(50.150.40, -Math.PI / 2.Math.PI / 2.false);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(150.150.40.0.Math.PI, false); ctx.fill(); }});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code

 

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')}; $.extend(myAction, {initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.moveTo(50.50);
                Parameter 1, 2: control point 1 coordinate parameter 3, 4: control point 2 coordinate parameter 4: arc radius
                ctx.arcTo(200.50.200.200.100);
                ctx.lineTo(200.200) ctx.stroke(); }});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code

5.

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')}; $.extend(myAction, {initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.moveTo(10.200); / / starting point
                var cp1x = 40,
                    cp1y = 100; / / control points
                var x = 200,
                    y = 200; / / end points
                // Draw a quadratic Bezier curvectx.quadraticCurveTo(cp1x, cp1y, x, y); ctx.stroke(); }});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx;

        var dom = {
            canvas: $('#myCanvas')}; $.extend(myAction, {initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                ctx.beginPath();
                ctx.moveTo(40.200); / / starting point
                var cp1x = 20,
                    cp1y = 100; // Control point 1
                var cp2x = 100,
                    cp2y = 120; // Control point 2
                var x = 200,
                    y = 200; / / end points
                // Draw the Bezier curve three timesctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke(); }});var init = function() { myAction.initCanvas(); } (); })</script>
</body>

</html>
Copy the code