<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var canvas = document.querySelector('canvas'); // 获取canvas的dom节点
var ctx = canvas.getContext('2d'); // 绘制上下文
// 创建渐变色
var gradient = ctx.createLinearGradient(240, 0, canvas.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
//角度 1deg=角度/180*Math.PI
//x轴 y轴
ctx.beginPath(); // 设置一个起始起始路径
ctx.translate(400, 300);
var timer = setInterval(function() {
//4.清除的点需要注意
ctx.clearRect(-151, -101, canvas.width, canvas.height);
//1.定义一个旋转的方法,确定每次时间间隔中要旋转多少弧度
ctx.rotate(0.01 * Math.PI);
//2.绘制一个矩形,因为需求要求矩形以中心为轴进行旋转,但是canvas中rotate只能以画布左上角为轴,进行旋转
//因此,只要使矩形的中心和画布的左上角重合就可以了(起点的横纵坐标为矩形宽高的一半)
function draw(ctx, x, y, R, r, fillStyle, strokeStyle) {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + 72 * i) / 180 * Math.PI) * R + x, -Math.sin((18 + 72 * i) / 180 * Math.PI) * R + y);
ctx.lineTo(Math.cos((54 + 72 * i) / 180 * Math.PI) * r + x, -Math.sin((54 + 72 * i) / 180 * Math.PI) * r + y);
}
ctx.closePath();
ctx.lineWidth = 4; //宽度为4
ctx.fillStyle = fillStyle; //填充颜色为粉色
ctx.fill(); // 填充;
ctx.strokeStyle = strokeStyle; //描边颜色
ctx.stroke(); //描边
}
draw(ctx, 0, 0, 100, 50, 'pink', gradient);
}, 100);
ctx.closePath(); // 关闭路径
</script>
</body>
</html>
2021-08-13 cavas实现旋转五角星
最新推荐文章于 2021-09-15 00:26:00 发布