canvas实战

最新推荐文章于 2024-04-23 09:00:00 发布

强壮的糙汉子

最新推荐文章于 2024-04-23 09:00:00 发布

阅读量181

点赞数

分类专栏： css3 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_60622481/article/details/126287497

版权

css3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天做的这个页面，我发现下面的曲线部分怎么弄呢？

研究研究之后我发现用画布可以

下面看我的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="10000px" height="10000px"></canvas>
</body>
<script>
    // 获取节点
    var canvas = document.getElementById('canvas');
    // 创建一个2d对象，里面包含很多属性和方法
    var ctx = canvas.getContext('2d');

    // 开始
    ctx.beginPath();
    // 长度为5
    ctx.lineWidth = 5;
    // 色系
    ctx.strokeStyle = "rgb(255,116,39)"
    // 形状为round
    ctx.lineCap = "round"
    // 实现虚线的方法，这个是2d对象内置的
    ctx.setLineDash([12, 12]);
    // 起点
    ctx.moveTo(200, 50);
    // 开始画曲线
    ctx.quadraticCurveTo(370, 150, 200, 300);

    // 新的起点
    ctx.moveTo(200, 300);
    ctx.quadraticCurveTo(20, 450, 180, 600);
    // 新的起点
    ctx.moveTo(180, 600);
    ctx.quadraticCurveTo(270, 660, 300, 900);
    // 画
    ctx.stroke();


    // 下方三角形
    ctx.beginPath();
    ctx.lineTo(300, 944);
    ctx.lineTo(285, 900);
    ctx.lineTo(315, 900);
    // ctx.fillStyle = "green";
    ctx.fillStyle = "rgb(255,116,39)"

    ctx.fill();
</script>

</html>

实现的效果