最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
H5繪制五角星的方法

這篇文章給大家分享的是有關(guān)H5繪制五角星的方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、札達網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計商城開發(fā)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為札達等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

是HTML5中新增的標(biāo)簽,用于繪制圖形,實際上,這個標(biāo)簽和其他的標(biāo)簽一樣,其特殊之處在于該標(biāo)簽可以獲取一個CanvasRenderingContext2D對象,我們可以通過JavaScript腳本來控制該對象進行繪圖。

只是一個繪制圖形的容器,除了id、class、style等屬性外,還有height和width屬性。在>元素上繪圖主要有三步:

1.獲取元素對應(yīng)的DOM對象,這是一個Canvas對象;
2.調(diào)用Canvas對象的getContext()方法,得到一個CanvasRenderingContext2D對象;
3.調(diào)用CanvasRenderingContext2D對象進行繪圖。

通過對五角星分析,我們可以確定各個頂點坐標(biāo)的規(guī)律,這里需要注意的一點是:在canvas中,Y軸的方向是向下的。

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
    //設(shè)置是個頂點的坐標(biāo),根據(jù)頂點制定路徑   
    for (var i = 0; i < 5; i++) {   
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
    }   
    context.closePath();   
    //設(shè)置邊框樣式以及填充顏色   
    context.lineWidth="3";   
    context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();

感謝各位的閱讀!關(guān)于H5繪制五角星的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!


當(dāng)前名稱:H5繪制五角星的方法
文章URL:http://fisionsoft.com.cn/article/psojed.html