canvas画数字
来源:互联网 发布:json数组格式怎样写 编辑:程序博客网 时间:2024/04/28 13:14
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画数字
- canvas图片数字计时
- canvas数字特效
- 用Canvas画带动画的渐变数字圆环
- 用Canvas画带动画的渐变数字圆环
- 用Canvas画带动画的渐变数字圆环
- HTML5 Canvas之猜数字游戏
- 用canvas完成超炫酷的数字时钟
- HTML5 Canvas粒子数字时钟动画
- Canvas的初识——模拟表盘数字绘制
- Canvas画虚线
- canvas画波形图
- Canvas之画七巧板
- canvas画七巧板
- Canvas画一个头像
- canvas画虚线
- 使用canvas画曲线
- 使用canvas画弧形
- [笔记]机器学习(Machine Learning) - 03.正则化(Regularization)
- centOS6.5安装LNMP
- [转自有道]十六种英语时态傻傻分不清?一篇文章告诉你它们的所有用法
- html5 canvas drawImage图片模糊
- Uncovering How Workspaces Work in WinDbg
- canvas画数字
- elasticsearch命令curl(学习笔记)
- 简易日历
- 一步步教你搭建别人的laravel项目
- hadoop mark
- Gradle全局变量设置、自定义BuildConfig
- ReentrantLock实现原理
- No validator could be found for type: java.lang.Double
- lintcode 跳跃游戏(116)