SK 提示知识点:
1.上下文获取
2.定时器使用
3.图片加载后绘制
4.位移,旋转的使用及注意点
5.环境保存与还原
6.clip() 限定裁剪区域
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="padding: 100px;">
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;"></canvas>
<script>
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.实现矩形旋转
var angle = 30;
//添加image
var image = new Image();
image.src = 'images/hero.jpg';
//加载图片
image.onload = function () {
//3.定时器
setInterval(function () {
//4. 清屏
ctx.clearRect(0,0, canvas.width, canvas.height);
//5.保存环境
ctx.save();
//6.开启路径
ctx.beginPath();
//7.位移, 确定旋转中心点 为矩形的中心
ctx.translate(450, 300);
//8.旋转
ctx.rotate(angle * Math.PI/180);
//ctx.fillRect(300, 300, 200, 100);
// ctx.fillRect(-100, -50, 200, 100);
//限定区域 圆心和旋转点重合
ctx.arc(0, 0, 200, 0, 2*Math.PI);
ctx.strokeStyle = 'yellow';
ctx.lineWidth = 8;
ctx.stroke();
ctx.clip();
//绘制图片
ctx.drawImage(image, -250, -250);
//9.还原环境
ctx.restore();
//10.累加角度
angle++;
},20);
}
</script>
</body>
</html>
