在朋友圈看到一道数学题，突发奇想，用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>
网友评论