canvas绘制一道数学题

作者: 最帅的坏兔子 | 来源:发表于2019-03-31 22:56 被阅读0次

canvas绘制一道数学题
浅析HTML5的Canvas——案例绘制
四、Android绘制知识总结(画布篇)
canvas
HTML5 Canvas笔记——Canvas绘制矩形（外角矩形和
Canvas绘制文字、设置阴影、创建路径绘制矩形和圆
Android中canvas基本使用
自定义View drawText()绘制文字
Android 自定义View(学习整理绘制顺序)
canvas绘制仪表盘

在朋友圈看到一道数学题，突发奇想，用canvas绘制出这个图形。

已知圆的半径为1，正方形ABCD与圆交点如图，求正方形的边长。

image.png

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="canvas" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        (function(){
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = 600;
            canvas.height = 600;
            ctx.beginPath();
            ctx.arc(300,300,100,0,2*Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.strokeStyle = 'skyblue';
            ctx.strokeRect(240, 220, 160, 160);

            ctx.beginPath();
            ctx.setLineDash([5,10]);
            ctx.strokeStyle = 'blue';
            ctx.moveTo(240, 380);
            ctx.lineTo(300,300);
            ctx.stroke();

            ctx.beginPath();
            ctx.setLineDash([5,10]);
            ctx.strokeStyle = 'blue';
            ctx.moveTo(240, 220);
            ctx.lineTo(300,300);
            ctx.stroke();

            ctx.beginPath();
            ctx.setLineDash([5,10]);
            ctx.strokeStyle = 'blue';
            ctx.moveTo(300, 300);
            ctx.lineTo(400,300);
            ctx.stroke();

            ctx.beginPath();
            ctx.font = '20px "微软雅黑"';
            ctx.fillStyle = 'green';
            ctx.textBaseline = 'bottom';
            ctx.fillText('A',230,220);

            ctx.beginPath();
            ctx.font = '20px "微软雅黑"';
            ctx.fillStyle = 'green';
            ctx.textBaseline = 'top';
            ctx.fillText('B',230,380);

            ctx.beginPath();
            ctx.font = '20px "微软雅黑"';
            ctx.fillStyle = 'green';
            ctx.textBaseline = 'top';
            ctx.fillText('C',400,380);

            ctx.beginPath();
            ctx.font = '20px "微软雅黑"';
            ctx.fillStyle = 'green';
            ctx.textBaseline = 'bottom';
            ctx.fillText('D',400,220);

            ctx.beginPath();
            ctx.font = '20px "微软雅黑"';
            ctx.fillStyle = 'green';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            ctx.fillText('E',400,310);

            ctx.beginPath();
            ctx.font = '20px "微软雅黑"';
            ctx.fillStyle = 'green';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';
            ctx.fillText('O',300,290);

        })();
    </script>
</body>
</html>