数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

canvas探照灯效果的示例代码

来源:脚本之家  责任编辑:小易  

canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)

也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复

接下来使用clip()方法实现一个探照灯效果

</iframe>
<button id="btn">变换</button>
<button id="con">暂停</button>
<canvas id="canvas" width="400" height="290" style="border:1px solid black">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
<script> btn.onclick = function(){history.go();}
con.onclick = function(){ if(this.innerHTML == '暂停'){ this.innerHTML = '恢复';
        clearInterval(oTimer);
    }else{ this.innerHTML = '暂停'; 
        oTimer = setInterval(fnInterval,50);
    }
} var canvas = document.getElementById('canvas'); //存储画布宽高
var H=290,W=400; //存储探照灯
var ball = {}; //存储照片
var IMG; //存储照片地址
var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; function initial(){ if(canvas.getContext){ var cxt = canvas.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); var tempX = Math.floor(Math.random()*(W-tempR) + tempR); var tempY = Math.floor(Math.random()*(H-tempR) + tempR)        
        ball = {
            x:tempX,
            y:tempY,
            r:tempR,
            stepX:Math.floor(Math.random() * 21 -10),
            stepY:Math.floor(Math.random() * 21 -10)
        };
        IMG = document.createElement('img');
        IMG.src=URL;
        IMG.onload = function(){
            cxt.drawImage(IMG,0,0);
      }//欢迎加入全栈开发交流圈一起学习交流:582735936
    ]//面向1-3年前端人员
  }   //帮助突破技术瓶颈,提升思维能力
        }   
    }    
} function update(){
    ball.x += ball.stepX;
    ball.y += ball.stepY; 
    bumpTest(ball);
} function bumpTest(ele){ //左侧
    if(ele.x <= ele.r){
        ele.x = ele.r;
        ele.stepX = -ele.stepX;
    } //右侧
    if(ele.x >= W - ele.r){
        ele.x = W - ele.r;
        ele.stepX = -ele.stepX;
    } //上侧
    if(ele.y <= ele.r){
        ele.y = ele.r;
        ele.stepY = -ele.stepY;
    } //下侧
    if(ele.y >= H - ele.r){
        ele.y = H - ele.r;
        ele.stepY = -ele.stepY;
    }
} function render(){ //重置画布高度,达到清空画布的效果
 canvas.height = H; if(canvas.getContext){ var cxt = canvas.getContext('2d');
        cxt.save(); //将画布背景涂黑
 cxt.beginPath();
        cxt.fillStyle = '#000';
        cxt.fillRect(0,0,W,H); //渲染探照灯
 cxt.beginPath();
        cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
        cxt.fillStyle = '#000';
        cxt.fill(); 
        cxt.clip(); //由于使用了clip(),画布背景图片会出现在clip()区域内
 cxt.drawImage(IMG,0,0);
        cxt.restore();
      }//欢迎加入全栈开发交流圈一起学习交流:582735936
    ]//面向1-3年前端人员
  }   //帮助突破技术瓶颈,提升思维能力
    }

}
initial();
clearInterval(oTimer); function fnInterval(){ //更新运动状态
 update(); //渲染
 render();    
} var oTimer = setInterval(fnInterval,50); 
</script> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


  • 本文相关:
  • canvas探照灯效果的示例代码
  • localstorage的过期时间设置的方法详解
  • 详解使用canvas保存网页为pdf文件支持跨域
  • canvas像素画板的实现代码
  • canvas拼图功能实现代码示例
  • 详解canvas 跨域脱坑实践
  • 浅谈移动端网页图片预加载方案
  • 使用html5 indexdb存储图像和文件的示例
  • h5 canvas中width、height和style的宽高区别详解
  • canvas中设置width与height的问题浅析
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved