canvas-8searchLight2.html
2015-11-23 15:09
597 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid"> The current browser does not support Canvas, can replace the browser a try! </canvas> <script> var searchLight = { x : 400, y : 400, radius : 150, vx : Math.random() * 5 + 10, vy : Math.random() * 5 + 10 } window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); setInterval(function(){ draw(context); update(canvas.width,canvas.height); },40); }else{ alert('当前游览器不支持Canvas,请更换游览器后再试!'); } } function draw(cxt){ var canvas = cxt.canvas; cxt.clearRect(0,0,canvas.width,canvas.height); cxt.save(); cxt.beginPath(); cxt.fillStyle = "#000"; cxt.fillRect(0,0,canvas.width,canvas.height) cxt.closePath(); cxt.beginPath(); cxt.arc(searchLight.x,searchLight.y,searchLight.radius,0,Math.PI*2); cxt.fillStyle = "#fff"; cxt.fill(); cxt.clip(); cxt.closePath(); cxt.font = "bold 150px Arial"; cxt.textAlign = "center"; cxt.textBaseline = "middle"; cxt.fillStyle = "#058"; cxt.fillText("Canvas",canvas.width/2,canvas.height/4); cxt.fillText("Canvas",canvas.width/2,canvas.height/2); cxt.fillText("Canvas",canvas.width/2,canvas.height * 3/4); cxt.restore(); } function update(canvasWidth,canvasHeight){ searchLight.x += searchLight.vx; searchLight.y += searchLight.vy; if(searchLight.x - searchLight.radius <= 0){ searchLight.vx = -searchLight.vx; searchLight.x = searchLight.radius; } if(searchLight.x + searchLight.radius >= canvasWidth){ searchLight.vx = -searchLight.vx; searchLight.x = canvasWidth - searchLight.radius; } if(searchLight.y - searchLight.radius <= 0){ searchLight.vy = -searchLight.vy; searchLight.y = searchLight.radius; } if(searchLight.y + searchLight.radius >= canvasHeight){ searchLight.vy = -searchLight.vy; searchLight.y = canvasHeight - searchLight.radius; } } </script> </body> </html>
相关文章推荐
- canvas-8clip.html
- canvas-7globleCompositeOperation2.html
- canvas-7globleCompositeOperation.html
- canvas-7global.html
- canvas-6shadow.html
- html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
- html各种数据校验
- html图标插件
- HTML编辑器
- HTML编辑器
- HTML Video 播放问题
- HTML中的行内元素和框元素详解
- html的换行问题(未解决)
- HTML总结
- html响应式布局
- html中使用sessionStorge存储数据
- html利用localStorage保存数据
- html 图片丢失
- html常用标签总结
- HTML表格边框的设置小技巧