基本代码结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02绘制直线</title>
	</head>
	<body>
		
		<canvas id="firCan" width="800" height="500">
			当前浏览器版本不支持 Canvas, 请升级.
		</canvas>
	</body>
	<script type="text/javascript">
        //获取到canvas
		var canvas = document.getElementById("firCan");
		//获取2D渲染上下文
		var context = canvas.getContext("2d");
		
	</script>
</html>

1,绘制直线

context.beginPath();//开始画线(预备)
context.moveTo(10,10);//起点
context.lineTo(300,300);//终点
context.stroke();//绘制路径轮廓

2,绘制矩形

//描边矩形(x,y,w,h)
context.strokeStyle = "aqua";//设置颜色
context.strokeRect(50,100,400,200);
//填充矩形
context.fillStyle = "coral";//设置颜色
context.fillRect(550,100,400,200);

3,绘制文本

context.fillText(txt,100,100);

4,绘制圆

arc(x,y,radius,startAngel,endAngel,anticclockwise);

* 六个参数:

* x,y 确定圆心半径

* radius 圆的半径

* startAngel 开始角度

* endAngel 结束角度

* anticclockwise 是否逆时针绘制;

* 注意:开始角度和结束角度是弧度值不是角度值

* π = 180°(JS中 Math.PI 就是π)

//设置线宽
		context.lineWidth = 10;
		//设置线帽:属性值  round 圆型 butt 方形 butt(默认值)
		context.lineCap = "round";
		
		
		context.beginPath();
		context.arc(250,250,200,0,Math.PI*2,false);
		context.closePath();
		context.stroke();

5,绘制阴影

context.shadowBlur = 20;//设置模糊度 越大越模糊
context.shadowOffsetX = 5;//x偏移
context.shadowOffsetY = 5;//y偏移
context.shadowColor = "orange";//颜色

注意:在设置完阴影之后绘制的图形都会带上阴影

6,清除Canvas

第一种方式:擦除矩形区域不会清楚之前设置的样式

* clearRect (x,y,w,h);

// context.clearRect(200,200,50,50);

* 第二中方式重置canvas的宽和高所有之前设置的样式都会被清除

canvas.width = 1000;

canvas.height = 800;

7,绘图状态的保存与恢复

绘图状态 :描述某一时刻 2D渲染上下文外观的整套属性,从简单的颜色值到负载的变换矩阵等其他特征

* 用于描述绘图状态的全部属性有: fillStyle, font, globalAlpha, globalCompositionOperation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, textBaseline, clipping区域(裁剪区域), 转换矩阵

* save :作用是保存绘图状态将绘图状态保存到绘图状态栈(先进后出),每调用一次就会向栈中添加一次绘图状态(入栈);

* restore: 作用是出栈恢复绘图状态(出栈);

* 一但出栈栈中就不在保存该绘图状态

* 一般 save的次数会 >= restore次数

8,渐变

* 线性渐变:createLinearGradient(x0,y0,x1,y1)

* x0,y0 起点

* x1,y1 终点

* 该方法返回值为CanvasGradient 类型的对象,该对象可以设置给 fillStyle 或者 strokeStyle

addColorStop(offset,color)

* 作用:为渐变对象设置颜色

* 两个参数 :

* offset : 颜色的偏移值,取值范围0-1(0是起点,1是终点)

* color :该偏移量上对应的颜色值

canvas的基本方法