扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
1HTML先写一个div给个ID名字
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
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();
}
}
创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网