画布旋转――HTML5之特效

时间2024-01-25 12:23:17发布访客分类HTML浏览380

导读：收集整理的这篇文章主要介绍了html5教程-画布旋转――HTML5之特效，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 translate.htM...

收集整理的这篇文章主要介绍了html5教程-画布旋转――HTML5之特效，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

translate.htML内容如下：

[html]
!DOCTYPE HTML>
html>
head>
script type="text/javascript" src="jquery-1.7.2.min.js"> /script>
script type="text/javascript" src="translate.js"> /script>
script type="text/javascript">
$(document).ready(function(){

} );
/script>
/head>
body>
canvas id="simple"> /canvas>
/body>
/html>

!DOCTYPE HTML>
html>
head>
script type="text/javascript" src="jquery-1.7.2.min.js"> /script>
script type="text/javascript" src="translate.js"> /script>
script type="text/javascript">
$(document).ready(function(){

} );
/script>
/head>
body>
canvas id="simple"> /canvas>
/body>
/html>

translate.js代码如下：

[javascript]
(function(){
    VAR canvas=null,
    context=null,
    angle=0;
    function resetCanvas(){
        canvas=document.getElementById("simple");
        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);
    } );
} )();

translate.html内容如下：

} );
/script>
/head>
body>
canvas id="simple"> /canvas>
/body>
/html>

translate.js代码如下：

[javascript]
(function(){
    var canvas=null,
    context=null,
    angle=0;
    function resetCanvas(){
        canvas=document.getElementById("simple");
        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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

div HTML jQuery post-format-gallery Rest

若转载请注明出处：画布旋转――HTML5之特效
本文地址： https://pptw.com/jishu/586509.html

HTML Tag input onclick 可用的功能大全 HTML5