中软大前端0313-canvas画布

canvas

---

• 创建画布
  <canvas id="canvas1" width="500px" height="500px"></canvas>
• 创建画布的2D图形
  var context=document.getElementById("canvas1").getContext("2d");
• 先添加样式，然后画图

直线

• context.beginPath();–绘制路径，开始一个画图
• context.closePath();–关闭路径，结束一个画图
  在同一个画布上画多个图形时需要区分,设置不同样式（如：循环输出图形时）
• context.moveTo(sx,sy); –直线起点
• context.lineTo(ex.ey);–直线终点
• context.strokeStyle= ;–样式，颜色（默认黑色）
• context.lineWidth= ;–线的宽度
• context.linCap=”butt/round/square”; –方角/圆角/方角（默认方角）
• context.stroke();–开始画图—画直线必须要有

<script type="text/javascript">
	var context=document.getElementById("canvas1").getContext("2d");
			
	function star(sx,sy,ex,ey){
		context.moveTo(sx,sy);
		context.lineTo(ex,ey);
		context.strokeStyle="#FF0000"
		context.lineWidth=10;
		context.lineCap="round";
		context.stroke();
	}
	star(50,150,300,150);
	star(300,150,100,300);
	star(100,300,175,50);
	star(175,50,250,300);
	star(250,300,50,150);
</script>

矩形–填充

• context.fillStyle=”#DEB887”;–填充样式
• context.fillRect(x,y,w,h);–矩形（位置，宽，高）;
• context.clearRect(x,y,w,h);–矩形裁剪

矩形–线

• context.strokeStyle=”#A52A2A”; –线的颜色
• context.lineWidth=5;–线的宽度
• context.strokeRect(x,y,w,h);–矩形边框

圆形–填充

• context.arc(x,y,r,starangle,endangle,)圆心xy,半径,起始角度，结束角度，顺时针/逆时针
  context.arc(100,100,100,0,Math.PI*2,true)
• context.fill();–填充圆形
• context.shadowColor=””;–阴影颜色
• context.shadowOffsetX=5;–阴影范围
• context.shadowOffsetY=5;–阴影范围
• context.shadowBlur=5;–阴影模糊度
  1开始创建路径
  2创建图形路径
  3关闭路径
  4设定绘制样式，调用绘制方法，绘制路径

阴影作用范围，阴影代码之后的图形元素都会有阴影，之前不作用

圆形–线

context.strokeStyle="";
context.arc(100,100,100,0,Math.PI*2,true);
context.stroke();

渐变

---

线性渐变

• var grade=context.createLinearGradient(x0,y0,x1,y1); –起始位置，终点位置

• grade.addColoorStop(0,颜色);–样式，添加颜色（0~1,颜色）
  将整个画布划分为1

• context.fillStyle=grade;–以线性渐变的方式填充

径向渐变

var grade1=ctx.createRadialGradient(300,300,50,300,300,100);
grade1.addColorStop(0,"red");
grade1.addColorStop(0.5,"white");
grade1.addColorStop(1,"#fff000");
			
context.fillStyle=grade1;
//ctx.arc(200,200,100,0,Math.PI*2,true);
context.fillRect(200,200,200,200);
context.fill();

• var grade1=context.createRadialGradient(x0,y0,r0,x1,y1,r1);–径向渐变（位置，半径，位置，半径）渐变范围是两个圆之间的位置

• context.fillStyle=grade1;–填充方式：以径向渐变的方式填充

• context.arc(200,200,100,0,Math.PI*2,true);–填充为圆形，填充范围为这个圆的范围（圆形填充 context.fill();）

• context.fillRect(200,200,200,200);–填充为矩形，填充范围为这个矩形范围

实心文字

• context.fillStyle=”#FF7F50”; –填充样式
• context.font=”50px 宋体”;–填充文字字体大小、样式
• context.fillText(“厉害了，我的国”,50,100);–填充文字内容，位置

context.shadowColor="#5F9EA0";
context.shadowOffsetX=5;
context.shadowOffsetY=5;
context.shadowBlur=5;
context.fillStyle="#FF7F50";
context.font="50px 宋体";
context.fillText("厉害了，我的国",50,100);

空心文字

• context.strokeStyle=”颜色”;–文字颜色
• context.font=”100px 隶书”;–字体大小，样式
• context.strokrText(“内容”,x,y);–文字内容，位置

context.strokeStyle="#FF0000";
context.font="50px 宋体";
context.strokeText("厉害了，我的国",50,200);
context.stroke();

练习–饼状图

context.beginPath();
context.fillStyle="#DEB887";
context.moveTo(100,100);
context.arc(100,100,80,Math.PI,Math.PI*3/2,false);
context.fill();
		
context.beginPath();
context.shadowColor="grey";
context.shadowOffsetX=5;
context.shadowOffsetY=5;
context.shadowBlur=5;

context.fillStyle="#FF7F50";
context.moveTo(110,110);
context.arc(110,110,80,0,Math.PI/2,false);
context.fill();
		
context.beginPath();
context.fillStyle="#A52A2A";
context.moveTo(100,100);
context.arc(100,100,80,Math.PI/2,Math.PI,false);
context.fill();
		
context.beginPath();
context.fillStyle="chocolate";
context.moveTo(100,100);
context.arc(100,100,80,Math.PI*3/2,Math.PI*2,false);
context.fill();

!