유성우 그리기를 위한 HTML5+JS 샘플 코드 공유

유성우...

HTML5에 익숙한 친구들은 HTML5의 강력한 기능을 알고 있어야 합니다. 그리기 및 렌더링 능력, js와 함께 HTML5를 사용하는 것은 svg 및 기타 기술보다 훨씬 뛰어나며 HTML5 그래픽 개발 프로세스도 비교적 간단합니다. 동적 그래픽을 그리는 것은 애니메이션으로 간주됩니다. 물론 Flash를 사용하여 구현할 수도 있지만 플러그인 지원이 필요합니다. 다음은 HTML5에서 애니메이션을 작성하는 과정을 간략하게 소개합니다.

우선, 기술적인 이야기를 먼저 하지 말고, 기술과 예술에 대해 이야기해 봅시다. IT분야에서는 기술은 뛰어나지만 예술적인 창의성이 부족한 사람이 좋은 직원이라고 생각합니다. 이를 엄밀히 말하면 코드워커라고 하면 특정 예술적이고 창의적인 능력을 갖춘 사람만이 기술적 혁신을 이룰 수 있습니다. 기술은 언제나 실천과 축적을 통해 얻을 수 있지만 예술은 대체되거나 학습될 수 없는 개인적인 세계관과 미학에서 나오기 때문에 우리 교수님들은 항상 기술 서적을 읽지 말고, 더 많이 읽고, 책과 교훈을 들으라고 경고하십니다. 건축, 미학 및 철학 교사. 잡스가 좋은 예가 될 것이다. 그의 아이패드와 아이폰은 기술과 예술의 결합이다. 이런 창의성은 다른 IT 기업이 따라하기 어렵다.

할말은 많지만 그게 더 중요한 것 같아요. 오늘날 IT 분야에서 창업을 하고 살아남으려면 특정 기술뿐만 아니라 남들이 따라할 수 없는 컨셉과 창의성이 필요하다고 선생님들이 자주 말씀하십니다. 구글 이미지, 빙 이미지, 바이두 이미지에서 "javascript"라는 단어를 검색해 보면 알고리즘부터 큰 문화적 차이까지 기업의 격차를 발견할 수 있을 것이고… 거인이 되었습니다.

그럼 다들 사진이나 유성의 실제 장면을 본 적이 있을 텐데요, 어떻게 그림을 그릴 수 있을까요? 때로는 평범해 보이는 것들이 주의 깊게 분석하기가 정말 어렵기 때문에 주의 깊은 관찰이 필요합니다. 예를 들어 사무실 건물이나 거주지의 1층에서 사무실이나 아파트까지의 계단 수를 알고 계십니까? 유성은 대기권에 떨어져서 타오르는 작은 운석이므로 머리는 밝고, 꼬리는 잔광이 있어야 합니다. 좀 더 화려하게 만들고 싶다면 중간에 색을 추가하면 됩니다. 이렇게 해서 유성의 모형이 나옵니다.

두 번째로, 이번 글의 주제로 돌아가서 기술적인 부분에 대해 이야기해보겠습니다!

js 객체지향에 대해서는 제가 간략하게 소개한 "HTML5 Application - Happy Birthday Animation Star"를 참고하시면 됩니다. 모든 특정 사물에는 사람의 이름, 나이 등과 같은 속성이 있습니다. 따라서 유성은 속도, 색상, 길이 등과 같은 기본 속성을 갖습니다.

예를 들어 제가 정의한

    this.x = -1;
    this.y = -1;
    this.length = -1;
    this.width = -1;
    this.speed = -1;
    this.alpha = 1; //透明度
    this.angle = -1; //以上参数分别表示了流星的坐标、速度和长度
    this.color1 = "";
    this.color2 = "";  //流星的色彩

속성에는 사물의 존재에는 항상 동작이 필요하며 이 동작은 객체 지향 방법 . 예를 들어 유성은 위치를 이동하고 스스로 그려야 합니다

예를 들어 유성은 중간 부분의 색상인 임의의 색상을 가지며 머리는 흰색이어야 합니다

/**************获取随机颜色函数*****************/
    this.getRandomColor = function () //
    {
        var a = 255 * Math.random(); a = Math.ceil(a);
        var a1 = 255 * Math.random(); a1 = Math.ceil(a1);
        var a2 = 255 * Math.random(); a2 = Math.ceil(a2);
        this.color1 = "rgba(" + a.toString() + "," + a1.toString() + "," + a2.toString() + ",1)";
        a = 255 * Math.random(); a = Math.ceil(a);
        a1 = 255 * Math.random(); a1 = Math.ceil(a1);
        a2 = 255 * Math.random(); a2 = Math.ceil(a2);
        this.color2 = "rgba(" + a.toString() + "," + a1.toString() + "," + a2.toString() + ",1)";
        //this.color1 = "white";
        this.color2 = "black";
    }

그러면 이동 과정업데이트자신만의 좌표

 /***************重新计算流星坐标的函数******************/
    this.countPos = function ()//
    {
        this.x = this.x - this.speed * Math.cos(this.angle * 3.14 / 180);
        this.y = this.y + this.speed * Math.sin(this.angle * 3.14 / 180);
    }
    /*****************获取随机坐标的函数*****************/
    this.getPos = function () //
    {
        var x = Math.random() * 1000 + 200;
        this.x = Math.ceil(x);
        x = Math.random() * 200;
        this.y = Math.ceil(x);
        this.width = 5;  //假设流星宽度是15
        x = Math.random() * 80 + 120;
        this.length = Math.ceil(x);
        this.angle = 30; //假设流星倾斜角30
        this.speed = 1; //假设流星的速度
    }

도 필요하고, 끊임없이 자신을 그려야 합니다

 /****绘制单个流星***************************/
    this.drawSingleMeteor = function () //绘制一个流星的函数
    {
        cxt.save();
        cxt.beginPath();
        cxt.lineWidth = this.width;
        cxt.globalAlpha = this.alpha; //设置透明度
        var line = cxt.createLinearGradient(this.x, this.y, this.x + this.length * Math.cos(this.angle * 3.14 / 180), 
        this.y - this.length * Math.sin(this.angle * 3.14 / 180)); //创建烟花的横向渐变颜色
        line.addColorStop(0, "white");
        line.addColorStop(0.1, this.color1);
        line.addColorStop(0.6, this.color2);
        cxt.strokeStyle = line;
        cxt.moveTo(this.x, this.y);
        cxt.lineTo(this.x + this.length * Math.cos(this.angle * 3.14 / 180), 
        this.y - this.length * Math.sin(this.angle * 3.14 / 180));
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
    }

태어날 때 초기화

/****************初始化函数********************/
    this.init = function () //初始化
    {
        this.getPos();
        this.alpha = 1;
        this.getRandomColor();
    }

이렇게 완성된 유성체

마지막으로 유성을 많이 쏘아 질서정연하게 움직여야 합니다

따라서 별을 저장하는

배열을 정의해야 합니다.

var Meteors = new Array() //유성의 개수

var MeteorCount = 1; //Meteors js의 setInterval() 함수를 사용하여

개수를 설정하여 타이머가 지속적으로 업데이트되도록 설정할 수 있습니다.

으르르르르르르

 

위 내용은 유성우 그리기를 위한 HTML5+JS 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!