Canvas基础

画图的几个步骤：

var c = document.getElementById("mycanvas");

var cxt = c.getContext("2d");

第一步：先设置样式、颜色（这一步也可调整到第5步之前）

fillStyle/strokeStyle/font/textAlign

第二步：找个起点开始画图。----beginPath;//不可忘，开始新的路径

第三步 : 划线，画出自己想要的图像。

moveTo/lineTo/arc/fllStroke/fillRect/fillText

第四步：完成图形，关闭路径。当然也可以什么都不做，就是画一个点或者一条线   ----- closePath

第五步：填颜色、实际画到canvas

stroke/fill/stokeText

Canvas动画的步骤：

1.清除canvas – clearRect
2.保存canvas状态 – save
3.画要做动画的形状
4.恢复canvas状态 – 如果你已经保存了状态，在画新的帧之前恢复它

 

动画例子1：小球在盒子里弹跳

var canvas=document.getElementById("ball");

var ctx=canvas.getContext("2d");

varwidth=canvas.getAttribute("width");

varheight=canvas.getAttribute("height");

var ball={          

         color:null,

         radiusRange:[5,15],

         speedRange:[-5,5],

         radius:null,

         coordX:null,

         coordY:null,

         speedX:null,

         speedY:null,

         init:function(){           

   ball.color="rgb("+createRandom(0,255)+","+createRandom(0,255)+","+createRandom(0,255)+")";

                   ball.radius=createRandom(ball.radiusRange[0],ball.radiusRange[1]);

                   ball.coordX=createRandom(ball.radius,width-ball.radius);

                   ball.coordY=createRandom(ball.radius,height-ball.radius);

                   ball.speedX=createRandom(ball.speedRange[0],ball.speedRange[1]);

                   ball.speedY=createRandom(ball.speedRange[0],ball.speedRange[1]);

         },

         redrawBall:function(){

                   ctx.clearRect(0,0,width,height);

                   ctx.beginPath();

                   ctx.arc(ball.coordX,ball.coordY,ball.radius,0,10);

                   ctx.fillStyle=ball.color;

                   ctx.fill();

                   if(ball.coordX+ball.radius>=width||ball.coordX-ball.radius<=0)

                            ball.speedX=-ball.speedX;

                   if(ball.coordY+ball.radius>=height||ball.coordY-ball.radius<=0)

                            ball.speedY=-ball.speedY;

                   ball.coordX+=ball.speedX;

                   ball.coordY+=ball.speedY;

 

         },

         run:function(){

                   setInterval(ball.redrawBall,10);

         }

}

function createRandom(startInt,endInt){

         vari=startInt+Math.floor(Math.random()*(endInt-startInt));

         returni;

}

window.onload=function(){

         ball.init();

         ball.run();

}

动画例子2：画板

var flag=0;//确定是否处于按下or鼠标放开状态
var bar=document.getElementById("bar");
var draw=bar.getContext("2d");
bar.addEventListener("mousedown",onMouseDown);
bar.addEventListener("mousemove",onMouseMove);
bar.addEventListener("mouseup",onMouseUp);
var rectanglex;
var rectangley;
var rectanglew;
var rectangleh;
function onMouseDown(event){
flag=1;
var to=$("select[name=tool]").val();
switch(to){
case '1':
draw.beginPath();
draw.lineWidth=$("select[name=line]").val();
draw.strokeStyle=$("select[name=color]").val();
draw.moveTo(event.pageX-this.offsetLeft,event.pageY-this.offsetTop);
break;
case '2':
break;
case '3':
break;
case '4':
draw.fillStyle=$("select[name=color]").val();
rectanglex=event.pageX-this.offsetLeft;
rectangley=event.pageY-this.offsetTop;
break;
case '5':
draw.strokeStyle=$("select[name=color]").val();
rectanglex=event.pageX-this.offsetLeft;
rectangley=event.pageY-this.offsetTop;
break;
case '6':
draw.clearRect(0,0,500,300);
default:
}
}
function onMouseMove(event){
var to=$("select[name=tool]").val();
if(flag==1){
switch(to){
case '1': //画线
draw.lineTo(event.pageX-this.offsetLeft,event.pageY-this.offsetTop);
draw.stroke();
break;
case '2': //橡皮擦
draw.clearRect(event.pageX-this.offsetLeft,event.pageY-this.offsetTop,5,5);
case '3': //吸管
$("#rgb").empty();
var rgb=draw.getImageData(event.pageX-this.offsetLeft,event.pageY-this.offsetTop,1,1);
var red=rgb.data[0];
var green=rgb.data[1];
var blue=rgb.data[2];
$("#rgb").text(red+","+green+","+blue);
break;
case '4': //画实心矩形
draw.clearRect(rectanglex,rectangley,rectanglew,rectangleh);
draw.beginPath();
rectanglew=event.pageX-this.offsetLeft-rectanglex;
rectangleh=event.pageY-this.offsetTop-rectangley;
draw.fillRect(rectanglex,rectangley,rectanglew,rectangleh);
break;
case '5': //画空心矩形
draw.clearRect(rectanglex,rectangley,rectanglew,rectangleh);
draw.beginPath();
rectanglew=event.pageX-this.offsetLeft-rectanglex;
rectangleh=event.pageY-this.offsetTop-rectangley;
draw.strokeRect(rectanglex,rectangley,rectanglew,rectangleh);
break;
case '6':
default:
}
}
else{
if(to=='3'){
$("#rgb").empty();
var rgb=draw.getImageData(event.pageX-this.offsetLeft,event.pageY-this.offsetTop,1,1);
var red=rgb.data[0];
var green=rgb.data[1];
var blue=rgb.data[2];
$("#rgb").text(red+","+green+","+blue);
}
}
}
function onMouseUp(e){
flag=0;
rectangleh=0;
rectanglew=0;
rectangley=0;
rectanglex=0;
}