前端训练营——JavaScript课件：六：canvas
canvas元素可被用来通过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画，也就是说canvas标签只是一个图形容器。canvas可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title></head><body>
<canvas id="canvas"></canvas></body>
<script> let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d') canvas.width = 500
canvas.height = 500 ctx.save() ctx.beginPath() // 将坐标移动到画布中央
ctx.translate(canvas.width / 2, canvas.height / 2) // 设置大圆、小圆半径
let R = 200 let r = 100 let x let y // 逆时针计算五角星外围10个点的坐标
for (let i = 0; i < 5; i++) { // 外围凸出的每个点坐标
x = Math.cos((18 + 72 * i) / 180 * Math.PI) * R
y = - Math.sin((18 + 72 * i) / 180 * Math.PI) * R // canvas中y轴的正向方向与直角坐标系相反
ctx.lineTo(x, y) // 外围凹下去的每个点坐标
x = Math.cos((54 + 72 * i) / 180 * Math.PI) * r
y = - Math.sin((54 + 72 * i) / 180 * Math.PI) * r // canvas中y轴的正向方向与直角坐标系相反
ctx.lineTo(x, y) } ctx.closePath() ctx.stroke() ctx.restore()
</script>
</html>