使用Canvas绘制w字符

最新推荐文章于 2024-12-25 15:49:11 发布

转载最新推荐文章于 2024-12-25 15:49:11 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2391658/blog/1510044

文章标签：

#python

本文通过一个具体的HTML5 Canvas示例，展示了如何使用JavaScript绘制复杂的路径，包括直线、二次贝塞尔曲线和三次方贝塞尔曲线等，并提供了完整的代码实现。

2019独角兽企业重金招聘Python工程师标准>>>

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Path 绘制路径</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="path" width="500" height="500"></canvas>
    </div>
    <script>
        var oPath = document.getElementById("path");
        var oContext = oPath.getContext("2d");

        oContext.beginPath();
        oContext.moveTo(100, 20);
        oContext.lineTo(200, 160);                               //Line 1
        oContext.quadraticCurveTo(230, 200, 250, 120);           //创建二次贝塞尔曲线
        oContext.bezierCurveTo(290, -40, 300, 200, 400, 150);    //创建三次方贝塞尔曲线
        oContext.lineTo(500, 90);                                //Line 2
        oContext.lineWidth = 5;
        oContext.strokeStyle = "tomato";
        oContext.stroke();
    </script>
    <!-- 示例图 -->
    <div style="position: absolute;bottom: 0;left: 0;width: 500px;">
        <img src="http://canvas.migong.org/wp-content/uploads/2015/12/paths.png" alt="Path 绘制路径" width="100%">
    </div>
</body>
</html>

效果：