canvas探照灯效果clip()原创

Html

Css

#canvas1 {
	box-shadow:3px 3px 10px black;
	background-color:black;
}

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.jq22.com/img/cs/500x500-9.png";

context.clearRect(0, 0, canvas.width, canvas.height);
    // 小球开始移动
    ball.move();
    // 开始绘制整个过程
    ball.draw();
    // var animateId = window.requestAnimationFrame(cycleAnimate);
    window.requestAnimationFrame(cycleAnimate);
    context.save();
    context.clip();
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    // 回复之前save()的状态
    context.restore();
    // 停止动画
    // window.cancelAnimationFrame(animateId);
} // 循环结束的括号
cycleAnimate();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas探照灯效果clip()原创



代码描述：利用canvas中的clip方法来绘制探照灯小狗

准备一个canvas
在上面绘制一个圆形区域
并实现圆形区域的移动和反弹效果
利用canvas的clip方法进行区域剪切
context.clip();
在剪切的区域中绘制图片

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

culiuxiang

相关代码

canvas探照灯效果clip()原创

最新