欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5中如何解決canvas元素引領(lǐng)下一代web頁(yè)面的問(wèn)題

HTML5中如何解決canvas元素引領(lǐng)下一代web頁(yè)面的問(wèn)題，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)長(zhǎng)期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為綿陽(yáng)企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作，綿陽(yáng)網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

初識(shí)canvas元素

HTML5新增了一個(gè)元素canvas，用于繪圖使用，其實(shí)它的表現(xiàn)和div比較接近（其實(shí)他應(yīng)該屬于inline-block），而提供了許多接口，從而輕易的繪制矩形框、園三角形等

PS：關(guān)于HTML5新增元素

經(jīng)過(guò)最近兩天的學(xué)習(xí)，和以前對(duì)HTML5的認(rèn)知，我認(rèn)為HTML5其實(shí)還是HTML4，兩者之間沒(méi)多大的區(qū)別，無(wú)非是增加了點(diǎn)新東西。
我認(rèn)為HTML5為我們帶來(lái)的真正意義是：我們可以用javascript做更多的事情了；我們可以用javascript實(shí)現(xiàn)更好的產(chǎn)品了。比如HTML5就解決了我們頭疼的跨域問(wèn)題、實(shí)時(shí)通信API、與現(xiàn)在的canvas之所以HTML5叫HTML5，我認(rèn)為他是劃時(shí)代的，比如他讓我們用網(wǎng)頁(yè)開(kāi)發(fā)游戲變成可能；比如他讓電腦桌面只剩IE不在是傳說(shuō)（過(guò)于夸張）

繪制矩形框

直入正題，我們來(lái)繪制一個(gè)矩形框看看,這里提供一個(gè)顏色選擇器用于方便的選擇顏色，PS：現(xiàn)在不用jquery編程感覺(jué)真麻煩。。。

 問(wèn)題：定義樣式與定義height與width

 一來(lái)就遇到了問(wèn)題，我這里先來(lái)截個(gè)圖：

代碼如下:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <script type="text/javascript">
       function draw() {
           //獲取canvas對(duì)象
           var canvas =  document.getElementById('canvas');
           if (canvas == null) {
               return false;
           }
           var context = canvas.getContext('2d');
           context.fillStyle = '#99d9ea';
           context.fillRect(0, 0, 300, 200); //填充畫(huà)布結(jié)束
 
           context.strokeStyle = 'red';
           context.fillStyle = 'gray';
           context.lineWidth = 1;
           context.fillRect(10, 10, 100, 100);
           context.strokeRect(10, 10, 100, 100);
 
           context.clearRect(20, 20, 20, 20);
       }
   </script>
</head>
<body>
   <canvas id="canvas" width=300 height="200" >
   </canvas>
   

   <button onclick="draw();">
       繪制矩形</button>
   <input type="color" />
</body>
</html>

各位情況canvas元素，圖一位設(shè)置width與height的情況，圖二十用style指定的情況：

HTML5中如何解決canvas元素引領(lǐng)下一代web頁(yè)面的問(wèn)題

可以看到，對(duì)于canvas來(lái)說(shuō)，還是老老實(shí)實(shí)定義高寬的好，別去傻乎乎的用樣式了，當(dāng)然這個(gè)問(wèn)題需要實(shí)際研究才能得出最終結(jié)論。

好了，現(xiàn)在我們?cè)賮?lái)看看繪制矩形這個(gè)方法：

PS：其實(shí)，使用該方法這么麻煩，完全可以將該函數(shù)封裝下下，使用便會(huì)簡(jiǎn)單許多
1、使用getElementById方法獲取繪制對(duì)象2、取得上下文getContext('2d')，這都是固定的寫(xiě)法3、指定填充的顏色fillStyle和繪制的顏色strokeStyle，即里面的顏色和邊框的顏色4、指定線寬linewidth6、填充/繪制 fillRect/strokeRect 參數(shù)為 x,y,width,height6、若是要使其中一塊透明，使用clearRect

至此，繪制矩形框便暫時(shí)告一段落。

繪制圓形

現(xiàn)在我們來(lái)繪制圓形，這個(gè)說(shuō)起繪制圓形，其實(shí)我原來(lái)用js好像寫(xiě)過(guò)一個(gè)，這里也貼出來(lái)看看：

代碼如下:


我是純js畫(huà)的圓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div
        {
            position: absolute;
            width: 1px;
            height: 1px;
            line-height: 1px;
        }
    </style>
    <script src="http://www.cnblogs.com/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //x2 + y2 = r2;
        $(document).ready(function () {
            //先畫(huà)x，y
            var box = $('#box');
            var NUM = 200;
            var R = NUM / 2;
            var RR = R * R;
            for (var i = 0; i <= NUM; i = i + 6) {
                //var divX = $('<div >*</div>')
                // var divY = $('<div >*</div>')

                var ti = i;
                //sqrt(x)
                if (ti > R) {
                    ti = ti - R;
                    var ty = Math.sqrt((RR - ti * ti));
                    var y = $('<div >*</div>')
                    var y1 = $('<div >*</div>')
                    box.append(y);
                    box.append(y1);
                } else if (ti < R) {
                    ti = R - ti;
                    var ty = Math.sqrt((RR - ti * ti));
                    var y = $('<div >*</div>')
                    var y1 = $('<div >*</div>')
                    box.append(y);
                    box.append(y1);
                }
                //box.append(divX);
                //box.append(divY);
            }

            for (var i = 0; i <= NUM; i = i + 6) {
                //var divX = $('<div >*</div>')
                // var divY = $('<div >*</div>')
                var ti = i;
                //sqrt(x)
                if (ti > R) {
                    ti = ti - R;
                    var ty = Math.sqrt((RR - ti * ti));
                    var y = $('<div >*</div>')
                    var y1 = $('<div >*</div>')
                    box.append(y);
                    box.append(y1);
                } else if (ti < R) {
                    ti = R - ti;
                    var ty = Math.sqrt((RR - ti * ti));
                    var y = $('<div >*</div>')
                    var y1 = $('<div >*</div>')
                    box.append(y);
                    box.append(y1);
                }
            }
        });
   
    </script>
</head>
<body>
    <div id="box" >
    </div>
</body>
</html>

HTML5中如何解決canvas元素引領(lǐng)下一代web頁(yè)面的問(wèn)題

話說(shuō)，他還是比較圓的說(shuō)。。。

進(jìn)入正題

說(shuō)起畫(huà)圓、正弦圖等肯定會(huì)經(jīng)過(guò)一定計(jì)算的，所以稍稍復(fù)雜點(diǎn)：

① 創(chuàng)建路徑

② 創(chuàng)建圖形路徑

③ 路徑創(chuàng)建完成后關(guān)閉路徑

④ 設(shè)定繪制樣式調(diào)用方法繪制之

代碼如下:


我是一個(gè)圓
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function draw() {
            //獲取canvas對(duì)象
            var canvas = document.getElementById('canvas');
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext('2d');
            context.fillStyle = '#99d9ea';
            context.fillRect(0, 0, 300, 200); //填充畫(huà)布結(jié)束
            for (var i = 0; i < 5; i++) {
                context.beginPath();
                context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
                context.closePath();
                context.strokeStyle = 'red';
                context.fill();
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200" >
    </canvas>
   
    <button onclick="draw();">
        繪制圓</button>
    <input type="color" />
</body>
</html>

HTML5中如何解決canvas元素引領(lǐng)下一代web頁(yè)面的問(wèn)題

我們來(lái)看看繪制圓過(guò)程中其它地方都沒(méi)有問(wèn)題，但是創(chuàng)建圓路徑這塊值得考慮：

arc方法參數(shù)很多，依次是：xy半徑開(kāi)始弧度（我們一般喜歡角度，所以要轉(zhuǎn)換）結(jié)束弧度順時(shí)針或者逆時(shí)針true為順時(shí)針
其它都好說(shuō)，主要這個(gè)開(kāi)始角度和結(jié)束角度我們來(lái)研究下，因?yàn)殚_(kāi)始我沒(méi)搞懂，但后來(lái)我發(fā)現(xiàn)他其實(shí)很簡(jiǎn)單了。。。就是開(kāi)始的角度和結(jié)束的角度嘛，和我們高中學(xué)的知識(shí)一樣的，只不過(guò)單位換算Math.PI/180為一度。。。。
反正還是沒(méi)說(shuō)清楚，對(duì)了，記得我們高中畫(huà)圓的除了圓規(guī)和一個(gè)計(jì)量三角形角度的半圓直尺了嗎，我要說(shuō)的角度就是那個(gè)。。。太坑爹了！
好像最右邊是0度，垂直是90度，水平是180度，既然如此，我們?cè)賮?lái)看看

看完上述內(nèi)容，你們掌握HTML5中如何解決canvas元素引領(lǐng)下一代web頁(yè)面的問(wèn)題的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前題目：HTML5中如何解決canvas元素引領(lǐng)下一代web頁(yè)面的問(wèn)題
鏈接URL：http://chinadenli.net/article32/pooopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)頁(yè)設(shè)計(jì)公司、面包屑導(dǎo)航、定制開(kāi)發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)