基于canvas基础学习笔记（一）的学习，首先从绘制一片星空开始：
一、星空绘制
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//*******************************星空绘制
context.fillStyle="black";
context.fillRect(0,0,canvas.width,canvas.height);
//************************************绘制多个不同的星星
for(var i=0;i<200;i++){
var R=Math.random()*10+10;
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height;
var a=Math.random()*360;
drawStar(context,R/2.0,R,x,y,a);
}
}
//rot为旋转的角度 -rot是顺时针转
function drawStar(cxt,r,R,X,Y,rot){
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+X,-Math.sin((18+i*72-rot)/180*Math.PI)*R+Y);
cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+X,-Math.sin((54+i*72-rot)/180*Math.PI)*r+Y);
}
cxt.closePath();
cxt.fillStyle="#fb3";
cxt.strokeStyle="#fd5";
cxt.lineWidth=3;
cxt.lineJoin="round";
cxt.fill();
cxt.stroke();
}
</script>
二、图形变换
位移：translate(x,y);
旋转：rotate(deg);
缩放：scale(sx,sy);
注：1.用translate(x,y)进行位移变换时，会产生叠加，用context.save()解决。（context.save()是一种保持绘图状态的方法）
2.用scale(sx,sy)进行缩放时，会将图形的大小、边框以及位置都进行缩放，同样用context.save()解决。
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
/*问题：会出现translate的叠加
context.fillStyle="red";
context.translate(100,100),
context.fillRect(0,0,400,400);
context.fillStyle="green";
context.translate(300,300),
context.fillRect(0,0,400,400);
*/
/* 解决办法一
context.fillStyle="red";
context.translate(100,100),
context.fillRect(0,0,400,400);
context.translate(-100,-100),
context.fillStyle="green";
context.translate(300,300),
context.fillRect(0,0,400,400);
}
*/
/* 解决办法二*/
context.save();
context.fillStyle="red";
context.translate(100,100),
context.fillRect(0,0,400,400);
context.restore();
context.save();
context.fillStyle="green";
context.translate(300,300),
context.fillRect(0,0,400,400);
context.restore();
}
</script>
三、变换矩阵
变换矩阵.jpg
设置变换矩阵：transform(a,b,c,d,e,f)
注：在设置变换矩阵时，会叠加上次产生的效果，用setTransform（a,b,c,d,e,f）设置时会自动忽略掉之前设置的效果。
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=1200;
canvas.height=800;
var context=canvas.getContext('2d');
//开始编码
context.fillStyle="red";
context.strokeStyle="#058";
context.lineWidth="5";
//a c e
//b d f
//0 0 1
//a——水平缩放 b——水平倾斜 c——垂直倾斜 d——垂直缩放 e——水平位移 f——垂直位移
context.save();
//context.transform(1,0,0,1,0,0);
context.transform(2,0.2,0.2,1.5,50,100);
context.fillRect(50,50,300,300);
context.strokeRect(50,50,300,300);
context.restore();
}
</script>
四、填充样式——fillStyle
1.线性渐变（定义在两点之间）
分两步进行设置：
第一步：确定渐变方向
var grd=context.context.createLinearGradient(xstart,ystart,xend,yend);
第二步：设置关键颜色位置和渐变色
grd.addColorStop(stop,color);
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
/*两个色的渐变
var linearGrad=context.createLinearGradient(0,0,800,800);//渐变方向
linearGrad.addColorStop(0.0,'#fff');
linearGrad.addColorStop(1.0,'#000');
context.fillStyle=linearGrad;
context.fillRect(0,0,800,800);
*/
//多个颜色渐变
var linearGrad=context.createLinearGradient(0,0,800,0);//水平渐变方向
linearGrad.addColorStop(0.0,'white');
linearGrad.addColorStop(0.25,'yellow');
linearGrad.addColorStop(0.5,'green');
linearGrad.addColorStop(0.75,'blue');
linearGrad.addColorStop(1.0,'black');
context.fillStyle=linearGrad;
context.fillRect(0,0,800,800);
}
</script>
2.径向渐变（放射状渐变，定义在两个同心圆上）
分两步进行设置：
第一步：确定渐变的圆心，半径
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
第二步：设置关键颜色位置和渐变色
grd.addColorStop(stop,color);
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//开始编码
var radialGrad=context.createRadialGradient(400,400,0,400,400,500);
radialGrad.addColorStop(0.0,'white');
radialGrad.addColorStop(0.25,'yellow');
radialGrad.addColorStop(0.5,'green');
radialGrad.addColorStop(0.75,'blue');
radialGrad.addColorStop(1.0,'black');
context.fillStyle=radialGrad;
context.fillRect(0,0,800,800);
}
</script>
3.使用图片、画布或video填充
使用图片填充：context.createPattern(img,repeat-style);
repeat-style包含三个值：no-repeat、repeat-x、repeat-y、repeat.
使用画布填充：context.createPattern（canvas,repeat-style);
使用视频填充：context.createPattern（video,repeat-style);
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//开始编码
var backgroundImage=new Image();
backgroundImage.src="img/1.jpg";
backgroundImage.onload=function(){
var pattern=context.createPattern(backgroundImage,"repeat");
context.fillStyle=pattern;
context.fillRect(0,0,800,800);
}
}
</script>
