canvas基础一-CFANZ编程社区

canvas基础一_jquery

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas 绘制两个长方形</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</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>

canvas基础一_jquery_02

<!DOCTYPE html>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</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);  //绘制矩形,填充的默认颜色为黑色
                //ctx.strokeStyle = '#ff0000';
                ctx.strokeRect(10, 70, 100, 50);  //绘制矩形边框
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

canvas基础一_jquery_03

ctx.clearRect(15, 15, 50, 25);

canvas基础一_canvas_04

<!DOCTYPE html>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</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(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
                //ctx.stroke(); //描边。stroke不会自动closePath()
                ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

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

以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)

注意：

radians=(Math.PI/180)*degrees   //角度转换成弧度

这里的度数都是弧度。
0弧度是指的x轴正方形

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

根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

canvas基础一_d3_05

<!DOCTYPE html>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</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>

canvas基础一_jquery_06

<!DOCTYPE html>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</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);
                //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
                ctx.arcTo(200, 50, 200, 200, 100);
                ctx.lineTo(200, 200)
                ctx.stroke();
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

canvas基础一_jquery_07

<!DOCTYPE html>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</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); //起始点
                var cp1x = 40,
                    cp1y = 100; //控制点
                var x = 200,
                    y = 200; // 结束点
                //绘制二次贝塞尔曲线
                ctx.quadraticCurveTo(cp1x, cp1y, x, y);
                ctx.stroke();
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>

canvas基础一_html_08

<!DOCTYPE html>
<html>

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

<body>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</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); //起始点
                var cp1x = 20,
                    cp1y = 100; //控制点1
                var cp2x = 100,
                    cp2y = 120; //控制点2
                var x = 200,
                    y = 200; // 结束点
                //绘制三次贝塞尔曲线
                ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
                ctx.stroke();
            }
        });

        var init = function() {
            myAction.initCanvas();
        }();
    })
    </script>
</body>

</html>