溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

canvas畫數(shù)字

發(fā)布時間：2020-07-22 10:18:59 來源：網(wǎng)絡(luò) 閱讀：891 作者：chairr 欄目：開發(fā)技術(shù)

1HTML先寫一個div給個ID名字

<canvas id="mycanvas"></canvas>

2js中獲取元素

var myCanvas = document.getElementById('mycanvas');

3設(shè)置寬度和高度

myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;

4獲取(2d對象繪畫環(huán)境()

var cxt = myCanvas.getContext('2d');

5定義距離左側(cè)的偏移

var l = 100;

6距離頂部的偏移

var t = 60;

7設(shè)計數(shù)字的存儲描述5數(shù)字的組成

var dots = [
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
];

8圓的半徑

var R = 10;

9遍歷該數(shù)字下所有的圓

for(var i=0;i<dots.length;i++){
for(var j=0;j<dots[i].length;j++){
// 如果是1，化緣；否則跳過
if(dots[i][j]!=1){
continue;
}


// 當(dāng)前的值
// dots[i][j]
// 此刻該位置的圓的圓心坐標(biāo) 第(i,j)個圓
var centerX = l + j*2*(R+1) + R+1;
var centerY = t + i*2*(R+1) + R+1;


// 繪制
cxt.beginPath();


// 繪制圓
cxt.arc(centerX,centerY,R,0,2*Math.PI);


// 填充
cxt.fillStyle = 'blue';


// 填充
cxt.fill();


cxt.closePath();
}
}

canvas畫數(shù)字


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手