canvas高级路径方法

最新推荐文章于 2024-11-08 08:52:41 发布

原创最新推荐文章于 2024-11-08 08:52:41 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #路径

web前端-动画图形专栏收录该内容

19 篇文章

订阅专栏

接下来深入探讨一下其他绘制路径的方法，包括弧线和曲线，以组合成复杂的图像。

一、弧线

有4种函数可以绘制弧线和曲线，以组合成复杂的图像。

1.context.arc()

context.acr(x,y,radius,startAngle,endAngle,anticlockwise)

x和y定义圆心的位置，radius定义弧线的半径，startAngle,endAngle使用弧度值，而不是角度值。anticlockwise可以是true或是false这两个值，用于定义弧线的方向。

context.arc(100,100,20,(Math.PI/180)*0,(Math.PI/180)*360,false);

圆弧示例完整代码如下：

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.beginPath();
                context.strokeStyle = 'black';
                context.lineWidth = 10;
                // context.arc(200, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                context.arc(200, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false); //4分之一圆
                context.arc(200, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 270, false); //4分之三圆
                //整圆
                context.stroke();
                context.closePath();
            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

2.context.arcTo()

这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到(x1,y1)点的直线相切，圆弧的终点与(x1,y1)到(x2,y2)的直线相切。

context.arcTo(350, 350, 100, 100, 20);

如下图：

完整案例代码如下：

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.beginPath();
                context.strokeStyle = 'black';
                context.lineWidth = 10;
                
                context.moveTo(0, 0);
                context.lineTo(100, 200);
                context.arcTo(350, 350, 100, 100, 20);
                
                context.stroke();
                context.closePath();

            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

3.贝塞尔曲线

贝塞尔曲线要比弧线灵活得多，它有立方和平方两种形式

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
context.quadraticCurveTo(cpx, cpy, x, y);

context.moveTo(0, 0);
context.quadraticCurveTo(100, 25, 0, 50);

这条曲线从(0,0)开始，到(0,50)结束，用来创建弧线位于(100,25),这个点大致上是圆弧的圆心。控制点x值100弧线拉伸成一个细长的曲线。

简单平方贝赛尔曲线，如下：

function drawScreen() {
                context.beginPath();
                context.strokeStyle = 'black';
                context.lineWidth = 10;

                context.moveTo(150, 0); // *
                context.bezierCurveTo(0, 125, 300, 175, 150, 300); // *



                context.stroke();
                context.closePath();

            }

3.canvas裁切区域

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                //在屏幕上画方块
                context.fillStyle = 'black';
                context.fillRect(10, 10, 200, 200);
                context.save();
                context.beginPath();

                //裁切画布从(0,0)点至50*50的正方形
                context.rect(0, 0, 50, 50);
                context.clip();

                //红色圈
                context.beginPath();
                context.strokeStyle = 'red';
                context.lineWidth = 5;
                context.arc(100, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                context.stroke();
                context.closePath();

                context.restore();

                //再次裁切整个画布
                context.beginPath();
                context.rect(0, 0, 500, 500);
                context.clip();

                //绘制没有裁切的蓝线
                context.beginPath();
                context.strokeStyle = "blue";
                context.lineWidth = 5;
                context.arc(100, 100, 50, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                //整圆
                context.stroke();
                context.closePath();
            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>