国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

javascript使用canvas繪圖（一）

shevy / 3618人閱讀

摘要：畫(huà)一條直線后面的會(huì)統(tǒng)一使用該樣式，不再重復(fù)貼出代碼這里設(shè)置畫(huà)布大小需要在標(biāo)簽里面直接設(shè)置后面的會(huì)統(tǒng)一使用該樣式，不再重復(fù)貼出代碼得到得到上下文環(huán)境清除原來(lái)的痕跡線條顏色起點(diǎn)終點(diǎn)線條寬度這是最后一步，繪制畫(huà)一個(gè)矩形設(shè)置填充顏色設(shè)置定

畫(huà)一條直線 css 
.canvas{
            background-color: #8BF0F7;
            cursor: pointer;
        }
后面的css會(huì)統(tǒng)一使用該樣式，不再重復(fù)貼出css代碼
html 
    
    
后面的js會(huì)統(tǒng)一使用該樣式，不再重復(fù)貼出css代碼
js 
    let canvas = document.getElementsByClassName("canvas");//得到canvas
    let ca=canvas[0]
    let gd= ca.getContext("2d");//得到canvas上下文環(huán)境
    gd.beginPath();//清除原來(lái)的痕跡
    gd.strokeStyle="red";//線條顏色
    gd.moveTo(100,100);//起點(diǎn)
    gd.lineTo(200,200);//終點(diǎn)
    gd.lineWidth=50;//線條寬度
    gd.stroke();//這是最后一步，繪制

畫(huà)一個(gè)矩形 
    let canvas=document.getElementsByClassName("canvas")[0];
    let gd = canvas.getContext("2d")
    gd.beginPath();
    gd.fillStyle="#B1B7B8";//設(shè)置填充顏色
    gd.fillRect(50,20,100,50);//設(shè)置定位大小（左上寬高）
    gd.stroke();

在一個(gè)矩形中清空一個(gè)矩形，使其透明 
            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d")
            gd.beginPath();
            gd.fillStyle="#149794"
            gd.fillRect(20,20,150,150);
            gd.clearRect(40,40,50,50);
            gd.stroke();

這里理解為，在canvas畫(huà)布中，畫(huà)了一個(gè)150150的矩形A，在這個(gè)矩形中又繪制了一個(gè)5050的clear矩形B，這個(gè)B會(huì)
清除A中的那一塊區(qū)域，使B這一區(qū)域變得透明，從而顯示了畫(huà)布的淺藍(lán)色,并不是全部層透明
畫(huà)一條曲線

使用arc方法，比較簡(jiǎn)單易懂，

            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d");
            gd.beginPath();
            gd.strokeStyle="#3C5AF2"
            gd.arc(100,100,50,0,90/180*Math.PI);
            //參數(shù)：圓心x坐標(biāo)，圓心y，半徑，開(kāi)始角度，結(jié)束角度（2*Math.PI是整圓）
            gd.stroke();


以下使用arc方法繪制餅圖

使用arcTo

            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d")
            gd.beginPath();
            gd.strokeStyle="red"
            gd.moveTo(20,20)
            gd.arcTo(200,40,200,170,100)
            gd.lineTo(200,170)
            gd.stroke();

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/110005.html

相關(guān)文章

  • javascript使用canvas繪圖（二）

    摘要：不同的線條樣式這里獲取節(jié)點(diǎn)我采用的自帶的，即在加入屬性，不熟悉的朋友可以使用上一篇文章的不同的兩條線交合處的拐彎樣式圓角平角尖角構(gòu)圖陰影陰影顏色軸上偏移量，負(fù)數(shù)為相反方向軸上偏移量，模糊的像素值，則不模糊漸變相當(dāng)于一條漸變線起始顏色 不同的lineCap（線條樣式） let gd=this.$refs.canvas.getContext(2d) ...

    劉厚水 評(píng)論0 收藏0

  • HTML5 Canvas游戲開(kāi)發(fā)實(shí)戰(zhàn) PDF掃描版

    摘要：游戲開(kāi)發(fā)實(shí)戰(zhàn)主要講解使用來(lái)開(kāi)發(fā)和設(shè)計(jì)各類常見(jiàn)游戲的思路和技巧，在介紹相關(guān)特性的同時(shí)，還通過(guò)游戲開(kāi)發(fā)實(shí)例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開(kāi)發(fā)實(shí)戰(zhàn)主要講解使用HTML5 Canvas來(lái)開(kāi)發(fā)和設(shè)計(jì)各類常見(jiàn)游戲的思路和技巧，在介紹HTML5 Canvas相關(guān)特性的同時(shí)，還通過(guò)游戲開(kāi)發(fā)實(shí)例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。在本書(shū)...

    cocopeak 評(píng)論0 收藏0

  • 自開(kāi)發(fā)的EasyCanvas繪圖庫(kù)實(shí)踐、Pixeler項(xiàng)目開(kāi)發(fā)小結(jié)

    摘要：所以在此次開(kāi)發(fā)中，嘗試了小步快跑快速迭代的方法。開(kāi)發(fā)，不僅是在開(kāi)發(fā)運(yùn)用上的提升，還是一個(gè)開(kāi)源項(xiàng)目的完整實(shí)踐。由于時(shí)間原因，在開(kāi)發(fā)完基礎(chǔ)版本后就去做別的項(xiàng)目。所以，好的文檔是項(xiàng)目的開(kāi)門(mén)鑰匙。兩個(gè)項(xiàng)目相輔相成。 showImg(https://segmentfault.com/img/bVba47g?w=900&h=150); 歡迎交換友鏈： laker.me--進(jìn)擊的程序媛Github：...

    lovXin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<