使用canvas实现超绚丽的旋转正方形

自己无意中的一个小“bug”，却让动画变得超绚丽= =

所以，不要害怕出bug，谁知道bug不会开出一朵绚丽的花呢？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
         body{
                text-align: center;
            }
            canvas{
                border:1px dashed green;
            }
        </style>
    </head>
    <body>
         <canvas id="cvs" width="800" height="600"></canvas>
    <script>
        var cvs=document.getElementById("cvs");
        var context=cvs.getContext("2d");

        /*超绚丽的旋转*/
        var agle=0;
        context.translate(cvs.width/2-50,cvs.height/2-50)
        setInterval(function () {
            //擦除画布，（因为坐标轴旋转的原因，没有擦完全）
            context.clearRect(-800,-600,800,600);
            context.rotate(agle);
            context.strokeRect(0,0,100,100);
            agle+=0.01;
        },30)

    </script>
    </body>

</html>

时间： 2024-10-07 00:24:31

使用canvas实现超绚丽的旋转正方形的相关文章

3D HTML5 Logo标志超炫酷旋转特效

今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标志在旋转的时候还有3D的视觉效果,这一切我们都是在canvas上实现的.具体演示和实现过程可以看下文. 你也可以在这里查看在线演示下面我们来简单分析一下实现这款3D动画的过程及其部分核心代码,主要由HTML代码以及Javascript代码组成. HTML代码: <canvas id="can

转载文章利用旋转正方形与图形的组合实现爱心

实现爱心效果图源码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用旋转正方形与图形的组合实现爱心</title> 6 <style> 7 html { 8 font-family: "microsoft yahei"; 9 } 10 .heartShaped { 11 position

canvas基础绘制-绚丽时钟

效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTime( endTime.getTime() + 3600*1000);//当前时间向后一小时: var curShowTimeSeconds = 0; function getCurrentShowTimeSeconds() { var curTime = new Date();//获取目前时间: /

css3-rotate实现超炫环形旋转特效

css3-rotate实现超炫环形旋转特效,css3特效,环形旋转,圆形旋转,css3-rotate实现超炫环形旋转特效是一款采用css3 rotate实现的蓝色环形旋转特效代码. http://www.huiyi8.com/css3/

8款超绚丽的jQuery焦点图动画

随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的就是一些超绚丽的jQuery焦点图动画插件,有些不仅基于jQuery,还带有CSS3的动画特效,因此显得更加炫酷. 1.jQuery实用图片滑块焦点图支持移动端滑动今天我们要再来介绍一款jQuery实用图片滑块焦点图,它也支持移动端的触屏滑动,这款插件并没有特别的动画效果,但方便实用. 在线演示

旋转正方形矩阵

Problem: 旋转正方形矩阵[题目] 给定一个整型正方形矩阵matrix, 请把该矩阵调整成顺时针旋转90度的样子. [要求] 额外空间复杂度为O(1). Solution: 同样,采用由外向内一圈一圈变换,找到元素变换位置的规律即可. 难点在于区分偶数维矩阵和奇数维矩阵的不同操作 Code: 1 #pragma once 2 3 #include <iostream> 4 using namespace std; 5 6 template<class T> 7 void Ro

9款超绚丽的HTML5/CSS3应用和动画特效

1.CSS3飘带状3D菜单菜单带小图标这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线演示源码下载 2.HTML5/CSS3 3D纸片折叠动画今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知

canvas基础绘制-绚丽倒计时

效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ball</title> <script src="digit_1.js"></script> <script src="countdown.js"></

android canvas变形，移动，旋转

public class testView extends View { private Bitmap mBitmap = null; private Bitmap nBitmap = null; private float scaleX = 1.0f; private float scaleY = 1.0f; private float step = 0.0001f; public testView(Context context, A