-
canvas 不建议用css控制大小，直接写width和height,是不带有单位的
查看全部 -
var WIDTH_W = 1024;
var WIDTH_H = 768;
var RADIUS = 8;
var MARGIN_T = 60;
var MARGIN_L = 30;
//var endTime = new Date();
//endTime.setTime(endTime.getTime() + 8 * (3600 * 1000))
var curShowTimeSeconds = 0;
var balls = [];
const colors = ['#33b5e5', '#0099cc', '#aa66cc', '#9933cc', '#99cc00', '#669900', '#ffbb33', '#ff8800', '#ff4444', '#cc0000']
window.onload = function() {
WIDTH_W = document.body.clientWidth
WIDTH_H = document.body.clientHeight
MARGIN_L = Math.round(WIDTH_W / 10);
MARGIN_T = Math.round(WIDTH_H / 5);
RADIUS = Math.round(WIDTH_W * 4 / 5 / 108) - 1
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = WIDTH_W;
canvas.height = WIDTH_H;
curShowTimeSeconds = getCurrentShowTimeSecond();
setInterval(
function() {
render(context);
update();
}, 50
)
}
function getCurrentShowTimeSecond() {
var curTime = new Date();
// var ret = endTime.getTime() - curTime.getTime();
var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
// ret = Math.round(ret / 1000);
// return ret >= 0 ? ret : 0;
return ret
}
function update() {
var nextShowTimeSeconds = getCurrentShowTimeSecond();
var nh = parseInt(nextShowTimeSeconds / 3600);
var nm = parseInt((nextShowTimeSeconds - nh * 3600) / 60);
var ns = nextShowTimeSeconds % 60;
var ch = parseInt(curShowTimeSeconds / 3600);
var cm = parseInt((curShowTimeSeconds - ch * 3600) / 60);
var cs = curShowTimeSeconds % 60;
if (ns != cs) {
if (parseInt(ch / 10) != parseInt(nh / 10)) {
addBalls(MARGIN_L + 0, MARGIN_T, parseInt(ch / 10));
}
if (parseInt(ch % 10) != parseInt(nh % 10)) {
addBalls(MARGIN_L + 15 * (RADIUS + 1), MARGIN_T, parseInt(ch / 10));
}
if (parseInt(cm / 10) != parseInt(nm / 10)) {
addBalls(MARGIN_L + 39 * (RADIUS + 1), MARGIN_T, parseInt(cm / 10));
}
if (parseInt(cm % 10) != parseInt(nm % 10)) {
addBalls(MARGIN_L + 54 * (RADIUS + 1), MARGIN_T, parseInt(cm % 10));
}
if (parseInt(cs / 10) != parseInt(ns / 10)) {
addBalls(MARGIN_L + 78 * (RADIUS + 1), MARGIN_T, parseInt(cs / 10));
}
if (parseInt(cs % 10) != parseInt(ns % 10)) {
addBalls(MARGIN_L + 93 * (RADIUS + 1), MARGIN_T, parseInt(cs % 10));
}
curShowTimeSeconds = nextShowTimeSeconds;
}
updateBalls();
console.log(balls.length)
}
function updateBalls() {
for (var i = 0; i < balls.length; i++) {
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
if (balls[i].y > WIDTH_H - RADIUS) {
balls[i].y = WIDTH_H - RADIUS;
balls[i].vy = -balls[i].vy * 0.75;
}
}
var cnt = 0;
for (var i = 0; i < balls.length; i++)
if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WIDTH_W)
balls[cnt++] = balls[i];
while (balls.length > Math.min(300, cnt)) {
balls.pop();
}
}
function addBalls(x, y, num) {
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) {
var aBall = {
x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
g: 1.5 + Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
vy: -5,
color: colors[Math.floor(Math.random() * colors.length)]
}
balls.push(aBall)
}
}
}
}
function render(cxt) {
cxt.clearRect(0, 0, WIDTH_W, WIDTH_H)
var h = parseInt(curShowTimeSeconds / 3600);
var m = parseInt((curShowTimeSeconds - h * 3600) / 60);
var s = curShowTimeSeconds % 60;
renderDigit(MARGIN_L, MARGIN_T, parseInt(h / 10), cxt)
renderDigit(MARGIN_L + 15 * (RADIUS + 1), MARGIN_T, parseInt(h % 10), cxt)
renderDigit(MARGIN_L + 30 * (RADIUS + 1), MARGIN_T, 10, cxt)
renderDigit(MARGIN_L + 39 * (RADIUS + 1), MARGIN_T, parseInt(m / 10), cxt)
renderDigit(MARGIN_L + 54 * (RADIUS + 1), MARGIN_T, parseInt(m % 10), cxt)
renderDigit(MARGIN_L + 69 * (RADIUS + 1), MARGIN_T, 10, cxt)
renderDigit(MARGIN_L + 78 * (RADIUS + 1), MARGIN_T, parseInt(s / 10), cxt)
renderDigit(MARGIN_L + 93 * (RADIUS + 1), MARGIN_T, parseInt(s % 10), cxt)
for (var i = 0; i < balls.length; i++) {
cxt.fillStyle = balls[i].color;
cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI, true);
cxt.closePath();
cxt.fill();
}
}
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) {
cxt.beginPath();
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();
}
}
}
}
查看全部 -
制作动画的架构：
setInterval{
function(){//每帧要做什么事情
render();//绘制当前的画面
update();//调整绘制画面需要的数据结构
],
50//每隔多少时间执行帧动画函数
};
查看全部 -
context.arc(圆心坐标x，圆心坐标y，半径，开始的弧度值，结束的弧度值，anticlockwise=false画弧线的方向，默认逆时针)//只设定状态，要画出来还是需要stroke()函数
弧度的设定是数字*Math.PI
context.closePath()会自动把不封闭的路径 用线段首尾相连，去掉只依靠beginPath（）同样可以起到重置设定的效果
closepath这个函数对fill函数没有用，去掉之后依然填充
查看全部 -
画一条直线：
context.moveTo(100,100)//直线的起点
context.lineTo(700,700)//直线的终点
context.lineTo(100,700)//多笔画时设置多终点即可
context.lineTo(100,100)//最后的笔画终点和开始的起点同坐标能连成一个完整形状（每一笔都是以上一个终点为起点的）
context.lineWidth = 5 //设置线条的宽度
context.strokeStyle =#005588 “”//设置线条的样式（颜色）
context.fillStyle="rgb(2,100,30)"//给画出来的多边形着色
context.stroke()//绘制直线
context.fill()//给多边形上色
/*先设置绘图的状态，再调用函数进行具体绘制*/
画布系统中坐标系设定：以左上角为原点，向右为x正轴，向下为y正轴
画多线段时：
后面的状态设定会覆盖前面的，因此需要使用代码：context.beginPath()和context.closePath()将当前需要使用的状态限定起来，从而避免后面的状态覆盖前面
查看全部 -
canvas：定义在浏览器上的画布
1、创建canvas
<canvas></canvas>
2、JavaScript
var canvas=document。getElementById（‘canvas’）
var context=canvas.getContext('2d')//绘图的上下文环境
//使用contexnt进行绘制
canvas.width和canvas.height也可以设置画布的大小
查看全部 -
通过格子方法画出一个字
查看全部 -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> </head> <body> <canvas id="canvas" width="1024" height="768" > 当前浏览器不支持canvas </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); canvas.width=1024; canvas.height=768; if(canvas.getContext("2d")){ var context = canvas.getContext("2d"); context.lineWidth=5; context.strokeStyle="#005588"; for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); /*圆心x,圆心y,半径,起点,结点,默认顺时针*/ context.closePath();/*如果当前路径未封闭，会自动让当前路径封闭*/ context.stroke(); } for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10); context.stroke(); } for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true); /*圆心x,圆心y,半径,起点,结点,true逆时针*/ context.closePath(); context.stroke(); } for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true); context.stroke(); } context.fillStyle="#005588"; for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,540,40,0,2*Math.PI*(i+1)/10,true); context.closePath(); context.fill(); } for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,660,40,0,2*Math.PI*(i+1)/10,true); context.fill(); } }else{ alert("当前浏览器不支持canvas"); } </script> </body> </html>查看全部 -
绘制弧线context.arc
查看全部 -
canvas默认大小是width：300px; height:150px;
查看全部 -
绘画盒子计算方式！
查看全部 -
html
<canvas id="canvas"></canvas>
js
var canvas = document.getElementById('canvas')得到canvas
var context = canvas.getContext('2d')获取上下文绘图环境
context
context.moveTo(x,y)
context.lineTo(x,y)设置路径
context.arc(cx,cy,r,sAng,eAng,true/false)绘制圆形或弧
context.beginPath()
context.closePath()表示一个状态/结束路径
context.lineWidth路径粗细
context.strokeStyle路径颜色
context.fillStyle填充色块颜色
context.stroke() 绘制路径
context.fill() 绘制填充色块
context.clearRect(x,y,width,height)对一个指定的矩形区域内的图像进行刷新
context.canvas 获取对应的上下文绘图环境
convas.width设置画布的宽
convas.height设置画布的高
canvas.getContext('2d')得到绘图环境
基本的动画制作方法Animation
查看全部 -
draw.
查看全部 -
绘制直线
context.moveTo(100,100) //下笔位置
context.lineTo(700,700); //结束位置（可以有多个，满足多次绘制的需求）
context.lineWidth = 5; //线条宽度
context.strokeStyle = '#058';//笔触样式
context.stroke(); //正式绘图
//多边形的着色方法
context.fillStyle = 'rgb(2,100,30)'; //填充样式
context.fill(); //正式填充
canvas的绘制基于状态
之前绘制的线条如果还有用，会以现在的状态来在绘制现在线条的同时，将之前的线条重新绘制一遍。状态指它的一些属性，如lineWidth,storkeStyle。
划分绘制过程
使用beginPath()和closePath() 表明一个绘制过程的开始和结束。那样各个过程之间就不会因为canvas基于状态绘制的特点，造成样式一致变成最后的状态。
查看全部 -
Cavas是基于状态的，save方法就是存储的当前的状态，绘制的过程不会存储。
查看全部
举报