canvas技术

【认识CAnvas技术】

一、计算机中的图的分类

1、位图

位图：在计算机中使用像素点来描绘的图像被称为“位图”。

1. 展现更加丰富的颜色数，适用于表达真实的场景。
2. 放大之后会有失真。
3. 位图的格式：.jpg、.png、.gif等。

2、矢量图

矢量图：在计算机中利用数学公式对图形的表达进行精确的计算，得到的是“矢量图”。

1. 矢量图适用于表达线条和线条之间的关系。
2. 矢量图放大之后不会失真。
3. 矢量图只能在特定软件中放大不失真并可以使用，在设备上无法直接使用，需要转换成位图使用。

二、认识canvas标记对

1. <canvas>标记对在HTML中实现的是一张画布。
2. 默认的画布尺寸为300px*150px。
3. <canvas>标记对的属性：
   width：设置画布的宽度。height：设置画布的高度。
   画布的宽度和高度不能使用CSS技术进行设置。
4. <canvas>是一个内联元素。

三、为画布设置一根画笔

使用canvas对象的getContent()方法获取一根专门在画布中绘画的画笔。

//封装利用选择器来进行DOM对象的获取
function $(selector){
	return document.querySelector(selector);
}

let canvas = $('.myCanvas');	//注：此处不是jquery对象（不能用jQuery的方法），而是DOM对象
let ctx = canvas.getContext('2d');
alert(ctx)	//[object CanvasRenderingContext2D]

【利用canvas进行矢量图绘制】

一、绘制基本图形

直线（line）、矩形（rectangle）、圆弧（arc）。

1. 绘制直线

<canvas class="myCanvas"></canvas>

//封装利用选择器来进行DOM对象的获取
function $(selector){
	return document.querySelector(selector);
}
let canvas = $('.myCanvas');
canvas.width = 800;
canvas.height = 400;
// 为画布设置一根画笔
let ctx = canvas.getContext('2d');
//1.确定直线的起点:ctx.moveTo(x,y);,将画笔移动到(x,y)坐标位置。
ctx.moveTo(50,50);
// 2.确定直线的端点:ctx.lineTo(x,y);
ctx.lineTo(65,50);
ctx.lineTo(100,70);
ctx.lineTo(100,70);
ctx.lineTo(110,70);
ctx.lineTo(145,50);
ctx.lineTo(160,50);
ctx.lineTo(160,75);
ctx.lineTo(150,85);
ctx.lineTo(160,95);
ctx.lineTo(160,120);
ctx.lineTo(145,120);
ctx.lineTo(110,100);
ctx.lineTo(100,100);
ctx.lineTo(65,120);
ctx.lineTo(50,120);
ctx.lineTo(50,95);
ctx.lineTo(60,85);
ctx.lineTo(50,75);
// 3.将最后一个端点和起点连接起来进行封口
ctx.closePath();
//4.为画笔设置边线颜色:
ctx.strokeStyle = "#3385ff";
//5.实现确定的起点和端点之间连线的绘制
ctx.stroke();
//6.为画笔设置填充颜色
ctx.fillStyle = "#e1565b";
//7.实现对封闭图形的颜色填充
ctx.fill();

2. 绘制矩形

//方法1：绘制边线矩形
ctx.strokeRect(200,50,250,150);
// 方法2：绘制填充矩形
ctx.fillRect(200,250,250,80);
//方法3：绘制任意矩形(该方法需要实现确定的起点和端点之间连线的绘制)
ctx.rect(470,40,100,250);
ctx.stroke();

//方法4：将矩形区域的内容清除
ctx.clearRect(100,100,200,200);

例：清除整个画布

<canvas class="myCanvas"></canvas>
<button class="btn">清除画布</button>

//封装利用选择器来进行DOM对象的获取
function $(selector){
	return document.querySelector(selector);
}
let canvas = $('.myCanvas');	//注：此处不是jquery对象（不能用jQuery的方法），而是DOM对象
$('.btn').addEventListener('click',function(){
	ctx.clearRect(0,0,canvas.width,canvas.height)
})

3.绘制圆弧

1. 圆弧是圆（圆上任意一点到圆心的距离是一样的）上的一个部分。
2. ctx.arc(cx,cy,radius,startAngle,endAngle,counterClockwise)

参数	解释
(cx,cy)	圆的圆心坐标。
radius	圆的半径
startAngle	弧的起点角度，单位为弧度
endAngle	弧的端点角度，单位为弧度
counterClockwise	设置弧的方向，默认值为false，表示顺时针方向。取值为true表示逆
时针方向

例：在第四象限绘制一个1/4的小弧。

let ctx = canvas.getContext('2d');
ctx.arc(canvas.width/2,canvas.height/2,200,0,Math.PI/2,false)
ctx.stroke()

例：在第一二三象限绘制一个3/4的大弧。

let ctx = canvas.getContext('2d');
ctx.arc(canvas.width/2,canvas.height/2,150,0,3*Math.PI/4,true)
ctx.stroke()

例：在第一象限绘制一个1/4的小弧。

ctx.arc(canvas.width/2,canvas.height/2,150,0,3*Math.PI/2,true)
ctx.stroke()

例：绘制一个园形。

let ctx = canvas.getContext('2d');
ctx.arc(canvas.width/2,canvas.height/2,150,0,2*Math.PI)
ctx.stroke()

二、图形的边特性

属性	取值
ctx.strokeStyle	设置图形的边线样式
ctx.lineWidth	设置图形边的粗细
ctx.lineCap	butt - 默认值，开放图形的端点没有向外延伸的效果。 round - 开放图形的端点向外延伸了一个圆头。 square - 开放图形的端点向外延伸了一个平头。
ctx.lineJoin	miter - 默认值，弯折部分时一个尖角。 bevel - 弯折部分是一个平角。 round - 弯折部分是一个圆角
ctx.setLineDash(array)	根据数组元素的取值来设置虚线。 参数：array - 利用一个数组来设置虚线的外观，数组元素的数值分别交替表示“有线部分”和“无线
部分”
ctx.lineDashOffset	设置虚线的偏移量
ctx.getLineDash()	获取当前线型的虚线参数