Canvans使用路径创建线段

最新推荐文章于 2022-09-26 15:04:26 发布

JinmyHe

最新推荐文章于 2022-09-26 15:04:26 发布

阅读量704

点赞数

分类专栏： web前端-动画图形文章标签： canvas 路径

本文链接：https://blog.csdn.net/weixin_42659625/article/details/82701629

版权

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

19 篇文章 1 订阅

订阅专栏

路径可以用来在画布上绘制任何形状。路径就是一系列点及这些点间的连线。Canvas上下文只能有一个“当前”路径。当调用context.save()方法时，不会将它储存为当前绘图状态的一部分。

设置路径的开始和结束：调用beginPath()函数开始一个路径，调用closePath()函数结束一个路径。连接路径内的两个点的路径称为子路径。如果终点与起点相连，子路径即成为封闭路径。

最基本的路径通过moveTo()和lineTo() 命令来控制.

canvas路径的相关属性：

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 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.strokeStyle = "black"; // 设置或返回用于笔触的颜色、渐变或模式
                context.lineWidth = "10"; // 设置或返回当前的线条宽度
                context.lineCap = "square"; //绘制圆形的结束线帽：
                context.beginPath(); //起始一条路径，或重置当前路径
                context.moveTo(20, 0); //把路径移动到画布中的指定点，不创建线条
                context.lineTo(100, 0); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
                context.stroke(); //绘制已定义的路径
                context.closePath(); //创建从当前点回到起始点的路径


            }
        }
    </script>
</head>

<body>
    <div style="position: absolute;top:50px;left: 50px; z-index: 10;">
        <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
        </canvas>
    </div>

</body>

</html>

案例2代码：

<!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() {
                //实例1：圆形端点，斜角连接，在画布左上角
                context.strokeStyle = 'black'; //需要可用的颜色
                context.lineWidth = 10; //设置或返回当前的线条宽度
                context.lineJoin = 'bevel'; //设置或返回两条线相交时，所创建的拐角类型
                context.beginPath(); //起始一条路径，或重置当前路径
                context.moveTo(0, 0); //把路径移动到画布中的指定点，不创建线条
                context.lineTo(25, 0); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
                context.lineTo(25, 25); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
                context.stroke(); //绘制已定义的路径
                context.closePath(); //创建从当前点回到起始点的路径

                //实例2：圆形端点，斜角连接，不在画布左上角
                context.beginPath();
                context.moveTo(10, 50);
                context.lineTo(35, 50);
                context.lineTo(35, 75);
                context.stroke();
                context.closePath();

                //实例3：平直端点，圆形连接，不在画布左上角
                context.lineJoin = "round"; //设置或返回两条线相交时，所创建的拐角类型
                context.lineCap = "butt"; //设置或返回两条线相交时，所创建的拐角类型
                context.beginPath();
                context.moveTo(10, 100);
                context.lineTo(35, 100);
                context.lineTo(35, 125);
                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>

lineCap属性：设置或返回线条的结束端点样式

值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

lineJoin属性：设置或返回两条线相交时，所创建的拐角类型