返回介绍

六、Canvas 优化

发布于 2024-06-21 00:35:13 字数 1284 浏览 0 评论 0 收藏 0

 <!-- requestAnim shim layer by Paul Irish -->
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame     ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame  ||
        window.oRequestAnimationFrame    ||
        window.msRequestAnimationFrame   ||
        function(/* function */ callback, /* DOMElement */ element){
        window.setTimeout(callback, 1000 / 60);
        };
  })();

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
var canvas, context, toggle;

init();
animate();

function init() {
  canvas = document.createElement( 'canvas' );
  canvas.width = 512;
  canvas.height = 512;
  context = canvas.getContext( '2d' );
  document.body.appendChild( canvas );
}

function animate() {
  requestAnimFrame( animate );
  draw();
}

function draw() {
  var time = new Date().getTime() * 0.002;
  var x = Math.sin( time ) * 192 + 256;
  var y = Math.cos( time * 0.9 ) * 192 + 256;
  toggle = !toggle;
  context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
  context.beginPath();
  context.arc( x, y, 10, 0, Math.PI * 2, true );
  context.closePath();
  context.fill();
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文