HTML5 Canvas笔记——利用剪辑区域来制作伸缩式动画
2020-05-20 本文已影响0人
没昔
剪辑区域来制作伸缩式动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用剪辑区域来制作伸缩式动画</title>
<style>
#canvas{
border:1px solid cornflowerblue;
position: absolute;
left:150px;
top: 10px;
background: #EEEEEE;
border: thin solid #aaa;
cursor: pointer;
box-shadow: rgba(200,200,255,0.9) 5px 5px 10px;
-webkit-box-shadow: rgba(200,200,255,0.9) 5px 5px 10px;
-moz-box-shadow: rgba(200,200,255,0.9) 5px 5px 10px;
}
</style>
</head>
<body>
<canvas id="canvas" width="605" height="420">您的浏览器不支持canvas</canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//进行绘制文本
function drawText(){
context.save();
context.shadowColor = 'rgba(100,100,150,0.8)';
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.fillStyle = 'cornflowerblue';
context.fillText('HTML5',20,250);
context.strokeStyle = 'yellow';
context.strokeText('HTML5',20,250);
context.restore();
}
function setClippingRegion(radius){
context.beginPath();
context.arc(canvas.width/2,canvas.height/2,radius,0,2*Math.PI,false);
context.clip();
}
//重新绘制canvas
function fillCanvas(color){
context.fillStyle = color;
context.fillRect(0,0,canvas.width,canvas.height);
}
function endAnimation(loop){
clearInterval(loop);
setTimeout(function(e){
context.clearRect(0,0,canvas.width,canvas.height);
drawText();
},1000);
}
function drawAnimationFrame(radius){
setClippingRegion(radius);
fillCanvas('lightgray');
drawText();
}
//闭幕动画
function animate(){
var radius = canvas.width/2;
var loop;
loop = window.setInterval(function(){
radius-=canvas.width/100;
fillCanvas('charcoal');
if(radius>0){
context.save();
drawAnimationFrame(radius);
context.restore();
}else{
endAnimation(loop);
}
},16);
};
//canvas的控制器
canvas.onmousedown = function(e){
animate();
}
//初始化进行绘制
context.lineWidth = 0.5;
context.font = '128pt comic-sans';
drawText();
</script>
</html>
效果如图所示：
