为什么我的1那么呆萌。。。
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
render( context );
};
function render( cxt ){
var hours = 12;
var minutes = 34;
var seconds = 56;
// x坐标 y坐标 绘制十位数字 上下文绘图环境
renderDigit( 0, 0, parseInt(hours/10), cxt ); // 绘制时间
}
function renderDigit( x, y, num, cxt ){
cxt.fillStyle = "rgb(0, 102, 153)";
for( var i=0; i<digit[num].length; i++ ){
for( var j=0; j<digit[num][i].length; j++ ){
if( digit[num][i][j] == 1 ){ // 1就绘制圆球
cxt.beginPath();
// 第（i，j）个圆的圆心位置：（ 为了美观圆与圆之间加多1 ）
// centerX: x + j*2 + (R+1) + (R+1)
// centerY: y + i*2 + (R+1) + (R+1)
cxt.arc(x+j*2+(RADIUS+1)+(RADIUS+1), y+i*2+(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时&电子钟效果</title>
<script src="digit.js"></script>
<script src="countdown.js"></script>
</head>
<body>
<!-- 大小无单位px -->
<!-- 左上角为原点，右为x正半轴，向下为y的正半轴 -->
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #CCCCCC;display: block;margin: 150px auto">
当浏览器不支持canvas的时候，会显示这段文字，当浏览器支持canvas的时候，这段文字是完全给忽略掉的！
</canvas>
</body>
</html>
个回答
-
- 各种各种各种
- 2015-12-22 10:30:31
cxt.arc(x+j*2+(RADIUS+1)+(RADIUS+1), y+i*2+(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);应该是
cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1), y+i*2*(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);吧
-
- moonstar
- 2015-12-05 00:46:28
确实很呆萌！
-
- 爱哭鬼459336
- 2015-11-09 10:34:38
// centerX: x + j*2 + (R+1) + (R+1)
// centerY: y + i*2 + (R+1) + (R+1)
cxt.arc(x+j*2+(RADIUS+1)+(RADIUS+1), y+i*2+(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);似乎这里有点问题
-
- 待繁华殆尽望各自安好
- 2015-09-06 11:29:52
好呆萌，是RADIUS+1这里把符号写错了吧
-
- MrLenon
- 2015-08-28 10:11:54
确实很呆萌！
-
- TAMJING
- 2015-08-24 13:39:00
已解决，又是眼瞎犯的错