成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

【題目】【5天】canvas元素

gnehc / 3409人閱讀

摘要：題目一繪制雪人，傳遞一個(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

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

  • javasscript - 收藏集 - 掘金

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

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

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來自國(guó)外的設(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 評(píng)論0 收藏0

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<