canvas画月亮

来源：互联网发布：苏州网络教育多少钱编辑：程序博客网时间：2024/05/22 17:24

<!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>

阅读全文

0 0