欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5 Canvas 旋轉(zhuǎn)風(fēng)車?yán)L制

  發(fā)布時間:2017-08-18 15:39:52   作者:追風(fēng)者的博客   我要評論
這篇文章主要介紹了HTML5 Canvas 旋轉(zhuǎn)風(fēng)車?yán)L制,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

寫在前面:

親愛的朋友們大家好,鄙人自學(xué)前端,第一次寫博客,寫的不好的地方,煩請同學(xué)們諒解.

在進(jìn)行教學(xué)之前,我想聰明的你已經(jīng)掌握了基本的Canvas基本操作方法,如果對Canvas還不是很了解,那么我建議你去http://www.w3school.com.cn/tags/html_ref_canvas.asp這里先熟悉一下;

okey!下圖即是我們完成后的簡單效果,心動不如行動,那么咱們就進(jìn)行簡單繪制吧!    

1、定義畫布

首先我們現(xiàn)在html文件里面插入<canvas>標(biāo)簽,定義畫布的尺寸,我這里定義畫布的尺寸為800*600像素。同時在內(nèi)部樣式表里面設(shè)置canvas的背景色(方便畫圖時觀看);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        #canvas {
            background:#5151a2;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
</body>
</html> 

接下來的核心就是在原生JS環(huán)境下,繪制風(fēng)車;通過JS DOM操作方法獲取到canvas元素對象,并通過getContex("2d")獲取2D繪圖上下文,通過這個方法就像是要告訴瀏覽器“我們要在這個畫布上繪制2d圖形”;

<script type="text/javascript">

    //獲取畫布的2d上下文
    var ctx = document.getElementById("canvas").getContext("2d");

2、繪制風(fēng)車底座

風(fēng)車的底座的幾何圖形看似就像一個細(xì)長細(xì)長的梯形,我們可以畫出一個梯形出來,然后填充顏色,這里為了達(dá)到相對較好的效果,使用了顏色漸變填充的方法;okey!直接看代碼吧~~!

 

    //定義一個函數(shù) ,封裝風(fēng)車的底部基座
    function buttom(){
        ctx.beginPath();                                        //開始一條新的繪制路徑
        var liner = ctx.createLinearGradient(390,600,410,600);    //設(shè)置變量(顏色漸變的方向-起點-終點)
        liner.addColorStop(0,"#ccc");                            //設(shè)置起點顏色
        liner.addColorStop(0.5,"#fff");                            //設(shè)置中點顏色
        liner.addColorStop(1,"#ccc");                            //設(shè)置終點顏色
        ctx.fillStyle = liner;                                    //梯形的填充方式設(shè)置為 變量(漸變顏色)    
        ctx.moveTo(395,300);                                    //提起我們的畫筆,起點設(shè)置為(395,300)
        ctx.lineTo(405,300);                                    //連接起點畫線
        ctx.lineTo(410,600);
        ctx.lineTo(390,600);                                    
        ctx.closePath();                                        //閉合路徑
        ctx.fill();                                                //填充梯形
        
    }
  buttom();                              //要調(diào)用函數(shù),才能在瀏覽器顯示

我們來看一下頁面中的效果,是不是很簡單?

(我感覺我話有點多哦~!~?。?/p>

3、繪制葉子

接下來的部分將是這個動畫中最關(guān)鍵的地方,首先我們分析一下葉子的結(jié)構(gòu),三片葉子夾角為120°,而且每片葉子的形狀是相同的;他們有一個圓心,你心中或許也有疑問,先畫圓心還是先畫葉子?葉子的形狀應(yīng)該怎么畫呢?葉子可不可復(fù)制粘貼呢?答案當(dāng)然是可以的,Let's do it! 

思路分析:

1)、由于3片葉子的形狀是一模一樣,我們只需要畫出一片葉子,第二第三片葉子直接copy就行了,聰明的我們是不是應(yīng)該給這個葉子的畫法封裝一個函數(shù)呀?就叫它bind(  )函數(shù)吧?。∶看握{(diào)用它就可以了!哎!你們TM太機(jī)智了

2)、三片葉子有一個圓心,繪制葉子的時候為了方便取坐標(biāo)值,我們將圓心從畫圖的左上角移動梯形頂部,這樣我們繪制葉子會方便很多!這里使用了translate()方法,移動坐標(biāo)系!

3)、最難的一點就是理解這里動畫是怎么實現(xiàn)的,因為動畫原理會影響到我們畫葉子的文檔結(jié)構(gòu):

首先我們先新建一個繪圖環(huán)境,我們稱它為環(huán)境1,我們在環(huán)境1上畫完第一片葉子;然后在   第一個繪圖環(huán)境前提下  旋轉(zhuǎn)120°新建第一個繪圖環(huán)境2,再此基礎(chǔ)上調(diào)用畫葉子的函數(shù)bind(  ),繪制二片葉子;第三片葉子的繪制方法如法炮制,在環(huán)境2的基礎(chǔ)上旋轉(zhuǎn)120°,新建環(huán)境3,調(diào)用繪制葉子函數(shù)bind(  )畫第三片葉子;

如果要實現(xiàn)動畫,我們只需要旋轉(zhuǎn)第一片葉子的繪圖環(huán)境1,第二片葉子和第三片葉子都是參照環(huán)境1為基準(zhǔn)畫出來的,是不是也跟著動起來了呢??        彈幕:666666

4)、最后就是一些基本的外觀樣式調(diào)試的啦!比如顏色漸變啊,透明度啊,之類的!

繪制葉子

畫這個葉子形狀的時候我是慢慢調(diào)試的,我的審美相當(dāng)low,原諒我只能畫出這樣的葉子,當(dāng)然想象力豐富的同學(xué)可以根據(jù)自己喜好來繪制,不過大體思路是一致的;

這里我聲明了一個變量 var num = 0;,作為環(huán)境1旋轉(zhuǎn)度數(shù)變化的一個參數(shù):  那么咱就直接看代碼吧?。。?/p>

 

var num =0;
function yezi(){
        ctx.save();  //保存默認(rèn)情況下的canvas變換狀態(tài)
        ctx.beginPath();
        ctx.translate(400,300);
        // ctx.globalAlpha = 0.9;
        // 設(shè)置第一次狀態(tài)下 坐標(biāo)系旋轉(zhuǎn)度數(shù)
        ctx.rotate((Math.PI/180)*num);
        var liner1 = ctx.createLinearGradient(30,-12,30,12);      //這里設(shè)置顏色漸變填充的樣式
            liner1.addColorStop(0,"#ccc");
            liner1.addColorStop(0.5,"#fff");
            liner1.addColorStop(1,"#ccc");
            ctx.fillStyle = liner1;
        ctx.save();                 //保存第一次狀態(tài)  平移坐標(biāo)系變換
            ctx.beginPath();
            bind();                //調(diào)用函數(shù)

            //繪制第二片葉子
            ctx.beginPath();
            ctx.rotate((Math.PI/180)*120);   //坐標(biāo)系旋轉(zhuǎn)120°
            ctx.save();                        //保存旋轉(zhuǎn)坐標(biāo)系狀態(tài),為第三片葉子做鋪墊
                bind();            //調(diào)用函數(shù)
                //繪制第三片葉子
                ctx.beginPath();
                ctx.rotate((Math.PI/180)*120);   //坐標(biāo)系旋轉(zhuǎn)120°
                ctx.save();    
                    bind();     //調(diào)用函數(shù)
                ctx.restore();    //回復(fù)第3次狀態(tài)前(旋轉(zhuǎn)坐標(biāo)系)
            ctx.restore();        //回復(fù)第2次狀態(tài)前(旋轉(zhuǎn)坐標(biāo)系)

            //繪制葉子中心圓圈
            ctx.beginPath();
            var arcgradient = ctx.createRadialGradient(0,0,0,0,0,16);
            arcgradient.addColorStop(0,"#ccc");
            arcgradient.addColorStop(0.1,"#fff");
            arcgradient.addColorStop(1,"#ccc");
            ctx.arc(0,0,10,0,Math.PI*2);
            ctx.fillStyle  = arcgradient;
            ctx.fill();

        ctx.restore();             //回復(fù)第1次狀態(tài)前(平移坐標(biāo)系)

        num+=5;   //第一狀下  環(huán)境1   態(tài)坐標(biāo)系旋轉(zhuǎn)度數(shù)增加********************************這個num使得環(huán)境1的旋轉(zhuǎn)角度在不停的變化,**********************************************
        ctx.restore();

    }

    //繪制每片葉子都重復(fù)的代碼,這里做一個函數(shù)包裝
    function bind(){
        ctx.moveTo(0,0);                    
        ctx.quadraticCurveTo(10,-12,30,-12);    //比賽爾曲線
        ctx.lineTo(190,-3);
        ctx.quadraticCurveTo(200,0,190,3);    
        ctx.lineTo(30,12);
        ctx.moveTo(0,0);
        ctx.quadraticCurveTo(10,12,30,12);
        ctx.fill();
    }

4、設(shè)置動畫

動畫這部分就比較簡單了,設(shè)置定時器,清除畫布,調(diào)用函數(shù);大功告成,打完收工?。?!

 

setInterval(function(){
        ctx.clearRect(0,0,800,600);    //每次執(zhí)行代碼前,都要將畫布清空,不然畫出的圖形會滯留在畫布上;
        buttom();               //調(diào)用函數(shù) 
        yezi();
    },50);

源碼:https://github.com/224137748/Canvas/blob/master/windmill.html

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格語法格式詳解

    在HTML語法中,表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧
    2025-04-21
  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧
    2025-04-21
  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標(biāo)注出對應(yīng)的
    2025-03-11
  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11
  • HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解

    在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點介
    2025-02-27
  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看
    2025-02-17
  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖
    2025-02-17
  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣
    2025-02-17
  • HTML5使用details標(biāo)簽:展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用,這個不用js即可實現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點擊再給出答案的效果,這里就為大家簡單介紹一下,
    2024-11-03

最新評論