canvas笔记-arcTo的使用及绘制弯月

首先介绍下这个函数

context.arcTo(x1, y1, x2, y2, r);

其中x1为弧的起点x坐标;

其中y1为弧的起点y坐标;

其中x2为弧的终点x坐标;

其中y2为弧的终点y坐标;

其中r为弧的半径。

 

程序运行截图如下:

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(150, 150);
        context.arcTo(650, 150, 650, 650, 300);
        context.lineWidth = 6;
        context.strokeStyle = "red";
        context.stroke();


        //baseline
        context.beginPath();
        context.moveTo(150, 150);
        context.lineTo(650, 150);
        context.lineTo(650, 650);

        context.lineWidth = 2;
        context.strokeStyle = "gray";
        context.stroke();
    }


</script>

</body>
</html>

 

下面是绘制给弯月

程序运行截图如下:

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");


        context.arc(400, 400, 300, 0.5 * Math.PI, 1.5 * Math.PI, true);
        context.moveTo(400, 100);
        context.arcTo(1200, 400, 400, 700, (400 - 100) * dis(400, 100, 1200, 400) / (1200 - 400));
        context.stroke();
    }

    function dis(x1, y1, x2, y2){

        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
    }


</script>

</body>
</html>

</body>
</html>

这里月亮最左边的那条边是圆弧,正园,不是椭圆,所以一开始使用arc去画给半圆,然后再使用arcTo去画弧。

这里来说下arcTo中半径是怎么算的

也就是(400 - 100) * dis(400, 100, 1200, 400) / (1200 - 400)

 

这里aco的tan为AH/HC也为R/AC

也就是R = (AH * AC) / HC

这个AH为400 - 100

AC为AH平方+HC的平方 开根号,也就是dis中的计算

HC为1200 - 400

展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值