溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1HTML先寫一個div給個ID名字
<canvas id="mycanvas"></canvas>
2js中獲取元素
var myCanvas = document.getElementById('mycanvas');
3設置寬度和高度
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
4獲取(2d對象繪畫環境()
var cxt = myCanvas.getContext('2d');
5定義距離左側的偏移
var l = 100;
6距離頂部的偏移
var t = 60;
7設計數字的存儲描述5數字的組成
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遍歷該數字下所有的圓
for(var i=0;i<dots.length;i++){
for(var j=0;j<dots[i].length;j++){
// 如果是1，化緣；否則跳過
if(dots[i][j]!=1){
continue;
}
// 當前的值
// dots[i][j]
// 此刻該位置的圓的圓心坐標 第(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();
}
}
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
