画布基础2--渐变

createLinearGradient(x,y,x1,y1)-创建线条渐变，x表示渐变开始的x坐标，y表示渐变开始的y坐标，x1表示渐变结束的x坐标，y1表示渐变结束的y坐标

createRadialGradient(x,y,r,x1,y1,r1)-创建一个径向/圆渐变

使用渐变对象，必须使用两种或两种以上的停止颜色

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1

<canvas id="canvas" width="1000" height="800">版本太低了，快去更新</canvas>
		<script type="text/javascript">
			//获得画布
			var canvas=document.getElementById("canvas");
			//2.创建画布上下文对象
			var context=canvas.getContext("2d");
			//.beginPanth()
			context.beginPath();
			//4.设置样式
			//创建渐变对象
			var linear=context.createLinearGradient(0,0,100,10);
			//添加渐变颜色
			linear.addColorStop(0,"blue");
			linear.addColorStop(1,"red");
			//设置矩形填充暗色
			context.fillStyle=linear;
			//5.绘制图形
			context.fillRect(0,0,200,100);
		</script>

效果

 canvas绘制文本重要属性

font-定义字体

fillText(text,x,y)-早canvas上绘制实心文本

strokeText(text,x,y)-在canvas上绘制空心的文本

 用“Arial”字体绘制文本效果

 

 

创建渐变对象
var linear=context.createLinearGradient(0,0,100,10);

添加渐变颜色
 linear.addColorStop(0,"blue");
 linear.addColorStop(1,"red");

设置矩形填充颜色
context.fillStyle=linear;

线段渐变

<canvas id="canvas" width="1000" height="800">版本太低了，快去更新</canvas>
		<script type="text/javascript">
			//获得画布
			var canvas=document.getElementById("canvas");
			//2.创建画布上下文对象
			var context=canvas.getContext("2d");
			//.beginPanth()
			context.beginPath();
			//4.设置样式
			//创建渐变对象
			var linear=context.createLinearGradient(0,0,300,0);
			//添加渐变颜色
			linear.addColorStop(0.7,"blue");
			linear.addColorStop(1,"red");
			//设置矩形填充暗色
			context.strokeStyle=linear;
			//5.绘制图形
			 context.moveTo(5,10);
			 context.lineTo(500,10);
			  context.stroke();
		</script>