canvas入门，就是这个feel！

概述

Canvas 是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。也就是说我们将通过JS完成画图而不是css。

canvas 默认布局为 inline-block，可以认为是一种特殊的图片。

走起 ~

canvas 划线

<canvas id="can" width="800" height="800"></canvas>

（宽高不能放在style里面，否则比例不对）

canvas里面的width和height相当于图片的原始尺寸，加了外部style的宽高，就相当于对图片进行压缩和拉伸。

// 1、获取原生dom对象
let dom = document.getElementById('can');

// 2、获取绘图对象
let can = dom.getContext('2d'); // 3d是webgl

// 定义线条起点
can.moveTo(0,0);

// 定义线条中点（非终点）
can.lineTo(400,400);
can.lineTo(800,0);

// 对标记范围进行描边
can.stroke()

// 对标记范围进行填充
can.fill();

设置线条属性

线条默认宽度是 1。

（一定要在绘图之前设置。）

can.lineWidth = 2; //设置线条宽度
can.strokeStyle = '#f00';  // 设置线条颜色

can.fillStyle = '#f00';  // 设置填充区域颜色

折线样式

• miter：尖角（当尖角长度值过长时会自动变成折角，如果强制显示尖角：can.miterLimit = 100 设置尖角长度阈值。
• round：圆角
• bevel：折角

can.lineJoin = 'miter';
can.moveTo(100, 100);
can.lineTo(300, 100);
can.lineTo(100, 200);
can.stroke()

can.lineJoin = 'round';
can.moveTo(400, 100);
can.lineTo(600, 100);
can.lineTo(400, 200);
can.stroke()

can.lineJoin = 'bevel';
can.moveTo(700, 100);
can.lineTo(900, 100);
can.lineTo(700, 200);
can.stroke()

设置线帽

• round：加圆角线帽
• square：加直角线帽
• butt：不加线帽

	can.lineCap = 'round';
    can.moveTo(100, 100);
    can.lineTo(300, 100);
	can.stroke()
	
     // 新建绘图，使得上一次的绘画样式不会影响下面的绘画样式（代码加在上一次绘画和下一次绘画中间。）
	can.beginPath()
	
	can.lineCap = 'square';
	can.moveTo(100, 200);
	can.lineTo(300, 200);
	can.stroke()
	
	can.beginPath()
	
	can.lineCap = 'butt';
	can.moveTo(100, 300);
	can.lineTo(300, 300);
	can.stroke()

画矩形

// 参数：x,y,宽，高

can.rect(100,100,100,100);
can.stroke();

// 画完即填充
can.fillRect(100,100,100,100);

画圆弧

// 参数：圆心x，圆心y，半径，圆弧起点与圆心的夹角度数，圆弧终点与圆心的夹角度数，true（逆时针绘画）

can.arc(500,300,200,0,2*Math.PI/360*90,false);
can.stroke()

示例：

can.moveTo(500,300);
can.lineTo(500 + Math.sqrt(100), 300 + Math.sqrt(100))
can.arc(500, 300, 100, 2 * Math.PI / 360 *startDeg, 2 * Math.PI / 360 *endDeg, false);
can.closePath()//将图形起点和终点用线连接起来使之成为封闭的图形
can.fill()

Tips:

1、can.beginPath() // 新建绘图，使得上一次的绘画样式不会影响下面的绘画样式（代码加在上一次绘画和下一次绘画中间。）

2、can.closePath() //将图形起点和终点用线连接起来使之成为封闭的图形。

旋转画布