canvas画月亮

最新推荐文章于 2024-12-18 00:05:23 发布

suweim

最新推荐文章于 2024-12-18 00:05:23 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/suweim/article/details/73848917

这篇博客通过HTML5的canvas元素展示了如何绘制一个带有笑脸的月球形状。首先，设置了canvas的宽度和高度，然后获取2D绘图上下文。接着，通过数学计算确定内外圆弧的半径，并绘制出月球的轮廓。最后，填充黄色并添加了笑脸细节，使得月球更加生动有趣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>月亮</title>
<style>
#myCanvas{
border:1px solid #ccc;
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas">
<p>您的浏览器不支持canvas元素</p>
</canvas>
</body>
<script>
var myCanvas = document.getElementById('myCanvas');

// 设置宽度和高度
myCanvas.width = 800;
myCanvas.height = 540;
// 获取2d绘制对象
var cxt = myCanvas.getContext('2d');
// 移动原点 400,270
cxt.translate(300,270);

// 设置外侧的圆弧的半径是R
var R = 200;

// A坐标 (0,-200) B坐标 (0,200) C坐标 (300,0)
var AH = 200;
var HC = 300;

// 以角∠ACH 正切值 tanACH = AH/HC = AO/AC ,求 AO

// 计算直角三角形的斜边长
var AC = Math.sqrt(Math.pow(AH,2)+Math.pow(HC,2));
// console.log(AC);

// 内侧圆弧的半径
var r = AC*AH/HC;

// 开始绘制

// 绘制外侧的半圆
cxt.beginPath();
// 圆弧
cxt.arc(0,0,R,Math.PI*0.5,Math.PI*1.5,true);
cxt.stroke();
// 绘制内侧的圆弧
cxt.moveTo(0,-200);
cxt.arcTo(300,0,0,200,r);
cxt.stroke();
cxt.closePath();

// 填充
cxt.fillStyle = 'yellow';
cxt.fill();

// 绘制笑脸
cxt.beginPath();
cxt.arc(130,-20,10,Math.PI,Math.PI*2);
cxt.stroke();
cxt.closePath();

cxt.beginPath();
cxt.arc(175,-20,10,Math.PI,Math.PI*2);
cxt.stroke();
cxt.closePath();

cxt.beginPath();
cxt.arc(153,0,10,0*Math.PI,Math.PI);
cxt.stroke();
cxt.closePath();
</script>
</html>