canvas使用的直角坐标系是y轴朝下的，所以当你新建一个画布，其实就是这样的：
2.png
三角函数在canvas绘制图形很有用。比如，如何画一个等边三角形呢？
2.png
利用三角函数，我们可以轻松搞定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border:1px dashed gray;">
</canvas>
</body>
</html>
<script>
window.onload = function () {
var cnv = document.getElementById("canvas");
var cxt = cnv.getContext("2d");
drawTriangle(cxt,50);
}
function drawTriangle(cxt, radius) {
cxt.beginPath();
cxt.lineTo(Math.cos(0) * radius, Math.sin(0) * radius);
cxt.lineTo(Math.cos(2 * Math.PI / 3) * radius, Math.sin(2 * Math.PI / 3) * radius);
cxt.lineTo(Math.cos(4 * Math.PI / 3) * radius, Math.sin(4 * Math.PI / 3) * radius);
cxt.closePath();
cxt.fill();
}
</script>
ACB三个点对应的，分别是0，2π/3和4π/3。
3.png
其实画出来的就是对应坐标中的这个三角形：
1.png
因为负坐标轴的那部分无法展示，我们可以通过平移坐标展示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border:1px dashed gray;">
</canvas>
</body>
</html>
<script>
window.onload = function () {
var cnv = document.getElementById("canvas");
var cxt = cnv.getContext("2d");
drawTriangle2(cxt,50,100);
}
function drawTriangle2(cxt, radius,offset) {
cxt.beginPath();
cxt.lineTo(Math.cos(0) * radius + offset, Math.sin(0) * radius + offset);
cxt.lineTo(Math.cos(2 * Math.PI / 3) * radius + offset, Math.sin(2 * Math.PI / 3) * radius + offset);
cxt.lineTo(Math.cos(4 * Math.PI / 3) * radius + offset, Math.sin(4 * Math.PI / 3) * radius + offset);
cxt.closePath();
cxt.fill();
}
</script>
7.png
网友评论