Canvas绘画之旅
定义在浏览器的画布
1：不建议直接设置宽高，因为这是画布的大小，还有分辨率的大小（实际尺寸和分辨率）
2：可以再js里面设置大小
3：当用户的浏览器不支持canvas时显示
4：不显示内容用js if-else 语句写
5：getContext() 方法返回一个用于在画布上绘图的环境。
语法
Canvas.getContext(contextID)
参数
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
6：画直线
moveTO笔尖位置——lineTO从100-700的线_—stroke() 绘制
以画布左上角为原点 x y轴展开
//设置线条宽度
context.lineWidth = 5; //线条样式(大多颜色)
context.strokeStyle = "#005588";
想接着画 就在 lineTO后接着写 绘制第二条线条
//接着绘制线条，出现第二个
context.lineTo(100, 700);
context.lineTo(100, 100); stroke() 绘制线条！！！
7：//fillStyle 着色 填充
context.fillStyle = "rgb(2,100,30)"
//实心绘制
context.fill()8：
出现都是黑色线条 因为canvasmoveTo+lineTo是绘制状态不是确定
想分开：
beginPath(); ------------closePath();
beginPath方法类似于开启新的路径绘画或清空已有路径
而closePath并不是用来表示结束 而是功能性的 做图形闭合处理
而closePath并不是用来表示结束 而是功能性的 做图形闭合处理
-----------------------------------【绘制七巧板】------------------------------
<canvas id="canvas" width="800" height="600" style="border:1px solid #aaa;display: block; margin: 50px auto;">
当前浏览器不支持。
</canvas>
<script type="text/javascript">
//数组 七块
var tangram = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
];
window.onload = function(){
var canvas =document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
for (var i = 0; i<tangram.length;i++) {
//那一块+绘图环境
draw(tangram[i],context);
}
}
function draw(piece,cxt){
cxt.beginPath();
cxt.moveTo(piece.p[0].x,piece.p[0].y);
for (var i =1;i<piece.p.lenth;i++) {
cxt.lineTo(pece.p[i].x,piece.p[i].y);}
cxt.closePath();
//填充颜色
cxt.fillStyle = piece.color;
cxt.fill();
//外邊框
cxt.strokeStyle = 'black';
cxt.lineWidth = 3;
cxt.stroke();
}
</script> ----------------------------【结束】------------------------------------------------
10：弧线
从哪个弧度开始 -----结束-------=-false 顺时针方向绘制
0的位置在右中间
11：绘制多段弧
12：fillStyle填充颜色
-----------------------------------【倒计时】-------------------------------------
1：点阵式
（1）：实心圆 （0）：空白
2：有小边框
CenterX=初始的x+第几列j * (包围盒的边长)2*（R+1) +（R+1）
格子系统
3：动画
1：匿名函数（每一帧要做什么）2：时间（毫秒 隔多久执行）
1：当期画面-数据调整
4：clearRect（）对图像进行一次刷新
-----------------------【程序】-----------------
HTML
<body style="height:100%">
<canvas id="canvas" style="height:100%">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script src="digit.js"></script>
<script src="countdown.js"></script>
</body>
didit.jsdigit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,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,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[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]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[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]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,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,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
]; countdown.js
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
const endTime = new Date(2016,9,27,18,47,52);
var curShowTimeSeconds = 0
var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.onload = function(){
// WINDOW_WIDTH = document.body.clientWidth
// WINDOW_HEIGHT = document.body.clientHeight
// MARGIN_LEFT = Math.round(WINDOW_WIDTH /10);
// RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108)-1
// MARGIN_TOP = Math.round(WINDOW_HEIGHT /5);
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
curShowTimeSeconds = getCurrentShowTimeSeconds()
setInterval(
function(){
render( context );
update();
}
,
50
);
}
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round( ret/1000 )
return ret >= 0 ? ret : 0;
}
function update(){
var nextShowTimeSeconds = getCurrentShowTimeSeconds();
var nextHours = parseInt( nextShowTimeSeconds / 3600);
var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 )
var nextSeconds = nextShowTimeSeconds % 60
var curHours = parseInt( curShowTimeSeconds / 3600);
var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 )
var curSeconds = curShowTimeSeconds % 60
if( nextSeconds != curSeconds ){
if( parseInt(curHours/10) != parseInt(nextHours/10) ){
addBalls( MARGIN_LEFT + 0 , MARGIN_TOP , parseInt(curHours/10) );
}
if( parseInt(curHours%10) != parseInt(nextHours%10) ){
addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );
}
if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
addBalls( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );
}
if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
addBalls( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );
}
if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
addBalls( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );
}
if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
addBalls( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%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 >= WINDOW_HEIGHT-RADIUS ){
balls[i].y = WINDOW_HEIGHT-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 < WINDOW_WIDTH )
balls[cnt++] = balls[i]
while( balls.length > 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,WINDOW_WIDTH, WINDOW_HEIGHT);
var hours = parseInt( curShowTimeSeconds / 3600);
var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 )
var seconds = curShowTimeSeconds % 60
renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt )
renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt )
renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt )
renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);
renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , cxt);
renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);
renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);
renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%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()
}
}
倒计时效果图
时间管理效果图
1：删除
const endTime = new Date(2016,9,27,18,47,52);
var curShowTimeSeconds = 0 2： 时间获取
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = curTime.getHours()*3600+curTime.getMinutes()*60+curTime.getSeconds();
return ret ;
} 