成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【題目】【5天】canvas元素

gnehc / 3367人閱讀

摘要：題目一繪制雪人，傳遞一個(gè)值，是填充，是圓圈。題目二編寫一個(gè)函數(shù)，他將來接受一個(gè)數(shù)組，繪制一條直線連接這些店。

題目一：繪制雪人，傳遞一個(gè)Boolean值，true是填充，false是圓圈。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var fillCricle = function(x,y,lineWidth,radius,boolean,color){
    ctx.lineWidth = lineWidth;
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2,false);
    if(boolean){
        ctx.fillStyle = color;
        ctx.fill();
    }else{
        ctx.strokeStyle = color;
        ctx.stroke();
    }

};

fillCricle(100,100,4,60,false,"black");
fillCricle(100,110,4,10,true,"red");
fillCricle(80,80,4,10,true,"green");
fillCricle(120,80,4,10,true,"green");

fillCricle(100,240,4,80,false,"black");
fillCricle(100,240,4,10,true,"green");
fillCricle(100,208,4,10,true,"green");
fillCricle(100,272,4,10,true,"green");

題目二：編寫一個(gè)函數(shù)，他將來接受一個(gè)數(shù)組：point =[[50,50],[50,100],[125,120],[100,50],[70,90],[100,90],[70,120]]，繪制一條直線連接這些店。

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

var point =[[50,50],[50,100],[125,120],[100,50],[70,90],[100,90],[70,120]];

var drawPoint = function (point) {
    //ctx.moveTo(point[0][0],point[0][1]);
    for(var i = 0; i < point.length; i++){
        ctx.lineTo(point[i][0],point[i][1]);
        ctx.stroke();
    }
};
drawPoint(point);

這題花了一些時(shí)間，主要問題是：

繪制直線的思路是沒理順，應(yīng)該是繪制第一個(gè)點(diǎn)，第二個(gè)點(diǎn)，第三個(gè)點(diǎn)，一次往后，最后連接起來；而當(dāng)時(shí)我的思路是，兩個(gè)點(diǎn)兩個(gè)點(diǎn)連接，就一直在moveTo、lineTo循環(huán)中。

不需要moveTo也可以繪制直線。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107718.html

相關(guān)文章

  • 【題目】【8天】canvas畫板

    摘要：和監(jiān)聽用戶是否在繪畫。再繪畫不在繪畫。監(jiān)測用戶是在使用橡皮檫，是在使用橡皮擦，停止使用鉛筆。使用，會(huì)變?yōu)槭褂?，后面?huì)增加一個(gè)屬性值。的作用是獲取寬度也就是寬度移動(dòng)端支持多點(diǎn)觸控，所以要獲取需要加上，表示第一個(gè)值 canvas畫板，比較簡易，目前還有很多bug1、手機(jī)端上下會(huì)晃動(dòng)2、下載按鈕微信上沒法用3、下載后背景色是透明4、切換成橡皮擦后，需要先點(diǎn)鉛筆才能繪畫，不能直接點(diǎn)顏色 ...

    Xufc 評論0 收藏0

  • javasscript - 收藏集 - 掘金

    摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題...

    Rango 評論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對底部前端掘金來自國外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評論0 收藏0

  • IMWeb前端提升營七天學(xué)習(xí)總結(jié)

    摘要：寫在前面月到這天，前端提升營，騰訊大佬們分享個(gè)人經(jīng)驗(yàn)，使出各種前端方面的大招。并且減輕服務(wù)器的負(fù)擔(dān)，的原則是按需取數(shù)據(jù)，可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。控制表單控件的禁用狀態(tài)。 寫在前面 5月24到30這7天，IMWeb前端提升營，騰訊大佬們分享個(gè)人經(jīng)驗(yàn)，使出各種前端方面的大招。從中學(xué)習(xí)了很多前端方面的知識(shí)，也get到了前端學(xué)習(xí)的方法論，還有一些算法知識(shí)等等。 現(xiàn)將...

    mating 評論0 收藏0

發(fā)表評論

0條評論

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