CANVAS 伸缩动画

来源：互联网发布：ojbk什么意思网络用语编辑：程序博客网时间：2024/05/21 08:50

var canvas = document.getElementById("canvas"),context = canvas.getContext("2d");//Functions.........................................................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, Math.PI*2, false);context.clip();}function fillCanvas(color) {context.fillStyle = color;context.fillRect(0, 0, canvas.width, canvas.height);}function endAnimation(loop) {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,loop;loop = window.setInterval(function() {radius -= canvas.width/100;fillCanvas('charcoal');if(radius > 0) {context.save();drawAnimationFrame(radius);context.restore();}else {endAnimation(loop);}},16);};//Event handlers.........................................................canvas.onmousedown = function (e) {animate();};//Initialization.......................................................context.lineWidth = 0.5;context.font = '128pt Comic-sans';drawText();

clip() 方法的用法：将剪辑区域设置为当前剪辑区域与当前路径的交集。在第一次调用clip()方法之前，剪辑区域的大小与整个canvas一致。因为clip()方法会将剪辑区域设置为当前剪辑区域与当前路径的交集，所以这么对该方法的调用一般都是嵌入save()与restore()方法之间的。否则剪辑区域将会越变越小，这通常不是我们想要的结果

0 0