茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
  • <sub id="ddbnn"><ol id="ddbnn"></ol></sub>

  • <legend id="ddbnn"></legend><s id="ddbnn"></s>

    利用HTML5 Canvas制作鍵盤(pán)及鼠標(biāo)動(dòng)畫(huà)的實(shí)例分享
    來(lái)源:易賢網(wǎng) 閱讀:1329 次 日期:2016-07-07 13:39:17
    溫馨提示:易賢網(wǎng)小編為您整理了“利用HTML5 Canvas制作鍵盤(pán)及鼠標(biāo)動(dòng)畫(huà)的實(shí)例分享”,方便廣大網(wǎng)友查閱!

    這篇文章主要介紹了利用HTML5 Canvas制作鍵盤(pán)及鼠標(biāo)動(dòng)畫(huà)的實(shí)例,文中分別分享了一個(gè)鍵盤(pán)控制的小球移動(dòng)和鼠標(biāo)觸發(fā)的小丑小臉例子,需要的朋友可以參考下

    鍵盤(pán)控制小球移動(dòng)

    眾所周知,我們所看到的動(dòng)畫(huà)實(shí)際上就是一系列靜態(tài)畫(huà)面快速切換,從而讓肉眼因視覺(jué)殘像產(chǎn)生了「畫(huà)面在活動(dòng)」的視覺(jué)效果。明白了這一點(diǎn)后,在canvas上繪制動(dòng)畫(huà)效果就顯得比較簡(jiǎn)單了。我們只需要將某個(gè)靜態(tài)圖形先清除,然后在另外一個(gè)位置重新繪制,如此反復(fù),讓靜態(tài)圖形按照一定的軌跡進(jìn)行移動(dòng),就可以產(chǎn)生動(dòng)畫(huà)效果了。

    下面,我們?cè)赾anvas上繪制一個(gè)實(shí)心小球,然后用鍵盤(pán)上的方向鍵控制小球的移動(dòng),從而產(chǎn)生動(dòng)態(tài)效果。示例代碼如下:

    JavaScript Code

    <!DOCTYPE html>   

    <html>   

    <head>   

    <meta charset="UTF-8">   

    <title>html5 canvas繪制可移動(dòng)的小球入門(mén)示例</title>   

    </head>   

    <body onkeydown="moveBall(event)">   

    <!-- 添加canvas標(biāo)簽,并加上紅色邊框以便于在頁(yè)面上查看 -->   

    <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   

    您的瀏覽器不支持canvas標(biāo)簽。   

    </canvas>   

    <script type="text/javascript">   

    //獲取Canvas對(duì)象(畫(huà)布)   

    var canvas = document.getElementById("myCanvas");   

    //表示圓球的類(lèi)   

    function Ball(x, y ,radius, speed){   

        this.x = x || 10;   //圓球的x坐標(biāo),默認(rèn)為10   

        this.y = y || 10;   //圓球的y坐標(biāo),默認(rèn)為10   

        this.radius = radius || 10; //圓球的半徑,默認(rèn)為10   

        this.speed = speed || 5;    //圓球的移動(dòng)速度,默認(rèn)為5   

        //向上移動(dòng)   

        this.moveUp = function(){   

            this.y -= this.speed;   

            if(this.y < this.radius){   

                //防止超出上邊界   

                this.y = this.radius;              

            }   

        };   

        //向右移動(dòng)   

        this.moveRight = function(){   

            this.x += this.speed;   

            var maxX = canvas.width - this.radius;   

            if(this.x > maxX){   

                //防止超出右邊界   

                this.x = maxX;             

            }   

        };   

        //向左移動(dòng)   

        this.moveLeft = function(){   

            this.x -= this.speed;   

            if(this.x < this.radius){   

                //防止超出左邊界   

                this.x = this.radius;              

            }   

        };   

        //向下移動(dòng)   

        this.moveDown = function(){   

            this.y += this.speed;   

            var maxY = canvas.height - this.radius;   

            if(this.y > maxY){   

                //防止超出下邊界   

                this.y = maxY;   

            }   

        };   

    }   

    //繪制小球   

    function drawBall(ball){   

        if(typeof ctx != "undefined"){   

            ctx.beginPath();   

            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);   

            ctx.fill();   

        }   

    }   

    //清空canvas畫(huà)布   

    function clearCanvas(){   

        if(typeof ctx != "undefined"){   

            ctx.clearRect(0, 0, 400, 300);         

        }   

    }   

    var ball = new Ball();   

    //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象,以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   

    if(canvas.getContext){     

        //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)   

        var ctx = canvas.getContext("2d");   

        drawBall(ball);   

    }   

    //onkeydown事件的回調(diào)處理函數(shù)   

    //根據(jù)用戶的按鍵來(lái)控制小球的移動(dòng)   

    function moveBall(event){   

        switch(event.keyCode){   

            case 37:    //左方向鍵   

                ball.moveLeft();   

                break;   

            case 38:    //上方向鍵   

                ball.moveUp();   

                break;   

            case 39:    //右方向鍵   

                ball.moveRight();   

                break;   

            case 40:    //下方向鍵   

                ball.moveDown();   

                break;   

            default:    //其他按鍵操作不響應(yīng)   

                return;   

        }   

        clearCanvas();  //先清空畫(huà)布   

        drawBall(ball); //再繪制最新的小球   

    }   

    </script>   

    </body>   

    </html>   

    請(qǐng)使用支持html5的瀏覽器打開(kāi)以下網(wǎng)頁(yè)以查看實(shí)際效果(使用方向鍵進(jìn)行移動(dòng)):

    使用canvas繪制可移動(dòng)的小球。

    小丑笑臉

    只需要了解很少的幾個(gè)API,然后使用需要的動(dòng)畫(huà)參數(shù),就能制作出這個(gè)有趣又能響應(yīng)你的動(dòng)作的Web動(dòng)畫(huà)。

    第一步,畫(huà)五官

    這個(gè)小丑沒(méi)有耳朵和眉毛,所以只剩下三官,但它的兩個(gè)眼睛我們要分別繪制,所以一共是四個(gè)部分。下面先看看代碼。

    繪制左眼的代碼

    JavaScript Code

    var leftEye = new Kinetic.Line({   

           x: 150,   

           points: [0, 200, 50, 190, 100, 200, 50, 210],   

           tension: 0.5,   

           closed: true,   

           stroke: 'white',   

           strokeWidth: 10        

         });  

    繪制右眼的代碼

    JavaScript Code

    var rightEye = new Kinetic.Line({   

            x: sw - 250,   

            points: [0, 200, 50, 190, 100, 200, 50, 210],   

            tension: 0.5,   

            closed: true,   

            stroke: 'white',   

            strokeWidth: 10      

          });  

    繪制鼻子的代碼

    JavaScript Code

    var nose = new Kinetic.Line({   

            points: [240, 280, sw/2, 300, sw-240,280],   

            tension: 0.5,   

            closed: true,   

            stroke: 'white',   

            strokeWidth: 10   

          });  

    繪制嘴巴的代碼

    JavaScript Code

    var mouth = new Kinetic.Line({   

            points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],   

            tension: 0.5,   

            closed: true,   

            stroke: 'red',   

            strokeWidth: 10   

          });  

    你會(huì)不會(huì)覺(jué)得很失望,原來(lái)就這么簡(jiǎn)單幾行代碼。沒(méi)錯(cuò),就是這么簡(jiǎn)單,相信你對(duì)自己能成為一名Web游戲動(dòng)畫(huà)程序員開(kāi)始有信心了!

    簡(jiǎn)單講解一下上面的代碼。Kinetic就是我們使用的js工具包。在頁(yè)面的頭部,我們需要這樣引用它:

    JavaScript Code

    var mouth = new Kinetic.Line({   

            points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],   

            tension: 0.5,   

            closed: true,   

            stroke: 'red',   

            strokeWidth: 10   

          });  

    其它幾個(gè)分別是幾個(gè)關(guān)鍵點(diǎn),線條彈性,顏色,寬度等。這些都很容易理解。

    第二步,讓圖動(dòng)起來(lái)

    這個(gè)動(dòng)畫(huà)之所以能吸引人,是因?yàn)樗茼憫?yīng)你的鼠標(biāo)動(dòng)作,和用戶有互動(dòng),這是一個(gè)成功的動(dòng)畫(huà)最關(guān)鍵的地方。如果你仔細(xì)觀察,這個(gè)小丑五官的變化只是形狀的變化,眼睛變大,嘴巴變大,鼻子變大,但特別的是這個(gè)變化不是瞬間變化,而是有過(guò)渡性的,這里面有一些算法,這就是最讓人發(fā)愁的地方。幸運(yùn)的是,這算法技術(shù)都非常的成熟,不需要我們來(lái)思考,在這些動(dòng)畫(huà)引擎庫(kù)里都把這些技術(shù)封裝成了非常簡(jiǎn)單方便的接口。下面我們來(lái)看看如何讓動(dòng)起來(lái)。

    左眼的動(dòng)畫(huà)

    JavaScript Code

    var leftEyeTween = new Kinetic.Tween({   

            node: leftEye,   

            duration: 1,   

            easing: Kinetic.Easings.ElasticEaseOut,   

            y: -100,   

            points: [0, 200, 50, 150, 100, 200, 50, 200]   

          });  

    右眼的動(dòng)畫(huà)

    JavaScript Code

    var rightEyeTween = new Kinetic.Tween({   

            node: rightEye,   

            duration: 1,   

            easing: Kinetic.Easings.ElasticEaseOut,   

            y: -100,   

            points: [0, 200, 50, 150, 100, 200, 50, 200]   

          });  

    鼻子的動(dòng)畫(huà)

    JavaScript Code

    var noseTween = new Kinetic.Tween({   

            node: nose,   

            duration: 1,   

            easing: Kinetic.Easings.ElasticEaseOut,   

            y: -100,   

            points: [220, 280, sw/2, 200, sw-220,280]   

          });  

    嘴巴的動(dòng)畫(huà)

    JavaScript Code

    var mouthTween = new Kinetic.Tween({   

            node: mouth,   

            duration: 1,   

            easing: Kinetic.Easings.ElasticEaseOut,   

            points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]   

          });  

    這些代碼非常的簡(jiǎn)單,而且變量名能自釋其意。稍微有點(diǎn)經(jīng)驗(yàn)的程序員想看懂這些代碼應(yīng)該不難?;久慷未a都是讓你提供一些點(diǎn),指定動(dòng)畫(huà)動(dòng)作的衰退模式和持續(xù)時(shí)間。

    完整的動(dòng)畫(huà)代碼

    JavaScript Code

    <!DOCTYPE HTML>   

    <html>   

      <head>   

        <style>   

          body {   

            margin: 0px;   

            padding: 0px;   

          }  

          #container {   

            background-color: black;   

          }   

        </style>   

      </head>   

      <body>   

        <div id="container"></div>   

        <script src="/js/lib/kinetic-v5.0.1.min.js"></script>   

        <script defer="defer">   

          var sw = 578;   

          var sh = 400;   

          var stage = new Kinetic.Stage({   

            container: 'container',   

            width: 578,   

            height: 400   

          });   

          var layer = new Kinetic.Layer({   

            y: -30    

          });   

          var leftEye = new Kinetic.Line({   

            x: 150,   

            points: [0, 200, 50, 190, 100, 200, 50, 210],   

            tension: 0.5,   

            closed: true,   

            stroke: 'white',   

            strokeWidth: 10        

          });   

          var rightEye = new Kinetic.Line({   

            x: sw - 250,   

            points: [0, 200, 50, 190, 100, 200, 50, 210],   

            tension: 0.5,   

            closed: true,   

            stroke: 'white',   

            strokeWidth: 10      

          });   

          var nose = new Kinetic.Line({   

            points: [240, 280, sw/2, 300, sw-240,280],   

            tension: 0.5,   

            closed: true,   

            stroke: 'white',   

            strokeWidth: 10   

          });   

          var mouth = new Kinetic.Line({   

            points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],   

            tension: 0.5,   

            closed: true,   

            stroke: 'red',   

            strokeWidth: 10   

          });   

          layer.add(leftEye)   

               .add(rightEye)   

               .add(nose)   

               .add(mouth);   

          stage.add(layer);   

          // tweens   

          var leftEyeTween = new Kinetic.Tween({   

            node: leftEye,   

            duration: 1,   

            easing: Kinetic.Easings.ElasticEaseOut,   

            y: -100,   

            points: [0, 200, 50, 150, 100, 200, 50, 200]   

          });    

          var rightEyeTween = new Kinetic.Tween({   

            node: rightEye,   

            duration: 1,   

            easing: Kinetic.Easings.ElasticEaseOut,   

            y: -100,   

            points: [0, 200, 50, 150, 100, 200, 50, 200]   

          });   

          var noseTween = new Kinetic.Tween({   

            node: nose,   

            duration: 1,   

            easing: Kinetic.Easings.ElasticEaseOut,   

            y: -100,   

            points: [220, 280, sw/2, 200, sw-220,280]   

          });    

          var mouthTween = new Kinetic.Tween({   

            node: mouth,   

            duration: 1,   

            easing: Kinetic.Easings.ElasticEaseOut,   

            points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]   

          });    

          stage.getContainer().addEventListener('mouseover', function() {   

            leftEyeTween.play();   

            rightEyeTween.play();   

            noseTween.play();   

            mouthTween.play();   

          });   

          stage.getContainer().addEventListener('mouseout', function() {   

            leftEyeTween.reverse();   

            rightEyeTween.reverse();   

            noseTween.reverse();   

            mouthTween.reverse();   

          });   

        </script>   

      </body>   

    </html>  

    更多信息請(qǐng)查看網(wǎng)頁(yè)制作
    由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!
    相關(guān)閱讀網(wǎng)頁(yè)制作

    2026國(guó)考·省考課程試聽(tīng)報(bào)名

    • 報(bào)班類(lèi)型
    • 姓名
    • 手機(jī)號(hào)
    • 驗(yàn)證碼
    關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
    工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
    云南網(wǎng)警備案專(zhuān)用圖標(biāo)
    聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
    咨詢(xún)QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
    云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)