• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5画布旋转效果示例

    keleyi.htm的代码如下:

    复制代码
    代码如下:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>html旋转画布</title>
    <script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jb51.js"></script>
    </head>
    <body>
    <canvas id="jb51"></canvas>
    </body>
    </html>

    jb51.js的代码如下:

    复制代码
    代码如下:

    /*
    * 功能:画布旋转
    */
    (function(){
    var canvas=null,
    context=null,
    angle=0;
    function resetCanvas(){
    canvas=document.getElementById("jb51");
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    context=canvas.getContext("2d");
    }
    function animate(){
    context.save();
    try{
    //清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);
    //设置原点
    context.translate(canvas.width * 0.5, canvas.height * 0.5);
    //旋转角度
    context.rotate(angle);
    //设置填充颜色
    context.fillStyle = "#FF0000";
    //绘制矩形
    context.fillRect(-30, -30, 60, 60);
    angle += 0.05 * Math.PI;
    }
    finally{
    context.restore();
    }
    }
    $(window).bind("resize",resetCanvas).bind("reorient",resetCanvas);
    $(document).ready(function(){
    window.scrollTo(0,1);
    resetCanvas();
    setInterval(animate,40);
    });
    })();

    上一篇:html5中svg canvas和图片之间相互转化思路代码
    下一篇:html5通过canvas实现刮刮卡效果示例分享
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5画布旋转效果示例 html5,画布,旋转,效果,示例,