canvas画数字

发布时间:2020-07-22 10:18:59 作者:chairr
来源:网络 阅读:899

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();
}
}

canvas画数字


推荐阅读:
  1. html5 canvas 画时钟
  2. canvas 每天一练 画直线

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

canvas vas

上一篇:使用linux的rhmask命令加密和解密文件

下一篇:php工具箱能够直接做网站吗

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》