Canvas基本使用1

1.什么是Canvas

• Canvas是H5新增的一个标签，我们可以通过JS在这个标签上绘制各种图案
• Canvas拥有多种绘制路径、矩形、圆形、字符以及图片的方法

2.绘制基本步骤

2.1.在body中创建一个canvas标签

<canvas></canvas>

• canvas标签有默认的宽高，默认width=300，默认height=150
• 不能通过CSS设置画布的宽高
  通过CSS设置画布宽高会在默认宽高的基础上拉伸。比如宽高设为500，就会将默认的300拉伸为500,150拉伸为500。绘制的图形会变形。
• 如果需要设置canvas宽高请通过元素行内属性width和height设置

2.2.通过js代码拿到canvas标签

let oCanvas = document.querySelector("canvas");`

2.3.从canvas标签中获取到绘图工具

let oCtx = oCanvas.getContext("2d");`

2.4.通过绘图工具在Canvas标签上绘制图形

例子1：Canvas绘制直线

/*第一条线*/
oCtx.moveTo(50,50);//起点
oCtx.lineTo(200,50);//终点
oCtx.lineWidth = 20;//修改高度
oCtx.strokeStyle = "salmon"//修改线条颜色
oCtx.lineCap = "round";//修改线条两端样式
oCtx.stroke();//连接起点和终点

/*第二条线*/
oCtx.beginPath();//重新开启一个路径，若没有本句话，三条线的lineWidth、strokeStyle方法会相互影响
oCtx.lineWidth = 10;//修改高度
oCtx.strokeStyle = "blanchedalmond"//修改线条颜色
oCtx.moveTo(50,100);//起点
oCtx.lineTo(200,100);//终点
oCtx.stroke();//连接起点和终点

/*第三条线*/
oCtx.beginPath();//重新开启一个路径，若没有本句话，三条线的lineWidth、strokeStyle方法会相互影响
oCtx.lineWidth = 5;//修改高度
oCtx.strokeStyle = "seagreen"//修改线条颜色
oCtx.moveTo(50,130);//起点
oCtx.lineTo(200,130);//终点
oCtx.stroke();//连接起点和终点。

• 注意1：线条默认宽度和颜色
  通过canvas绘制的线条默认宽度是1px, 颜色是纯黑色
  但是由于默认情况下canvas会将线条的中心点和像素的底部对齐,
  所以会导致显示效果是2px和非纯黑色（默认宽度是1px的部分是纯黑色，超出1px的部分不是黑色）问题。可以通过将线条位置减少0.5px确保默认宽度为1px

• 注意2：线条相关属性：
  1.lineWidth：线条高度
  2.strokeStyle：线条颜色
  3.lineCap：线条两端样式。默认butt（什么都没有）、round(两端为圆形)、square（两端为长方形）

• 注意3：多根线条
  如果是同一个路径, 那么路径样式会被重用(第二次绘制会复用第一次的样式)
  如果是同一个路径, 那么后设置的路径样式会覆盖先设置的路径样式
  如何给每根线条单独设置路径样式?每根线条都开启一个新的路径即可
  oCtx.beginPath();//重新开启一个路径
  （只要没有手动开启新的路径, 那么使用的都是默认路径。如果都是默认路径, 那么设置的样式在同一个路径中都是有效的）

-注意4：当线条的样式一样时。oCtx.stroke();绘制路径的代码只用在第三条线的末尾写一次。不用每条线都写
例子2：Canvas绘制最基本的三角形

• 1.closePath
  自动创建从当前点回到起始点的路径

• 2.lineJoin
  设置相交线的拐点样式 miter(默认直角)、round（圆角）、bevel（切角）

	oCtx.moveTo(100,100);
	oCtx.lineTo(300,100);
	oCtx.lineTo(300,300);
	oCtx.closePath();*闭合起点到终点*/
	oCtx.lineJoin = "bevel";//设置相交线的拐点样式
	oCtx.lineWidth = 20;
	oCtx.stroke();

例子3：填充图形
绘制三角形填充内部

    oCtx.moveTo(100,100);
    oCtx.lineTo(300,100);
    oCtx.lineTo(300,300);
    oCtx.closePath();/!*闭合起点到终点*!/
    oCtx.lineJoin = "bevel";
    oCtx.fillStyle = "salmon";/!*修改填充的颜色*!/
    oCtx.fill();/!*填充已定义的路径*!/

默认路径：

• 只要没有手动开启新的路径, 那么使用的都是默认路径
• 如果都是默认路径, 那么设置的样式在同一个路径中都是有效的

同一路径,在填充的时候回遵循非零环绕规则:

• 从当前的区域拉出一条直线, 遇到顺时针相交的线就+1, 遇到逆时针相交的线就-1
• 最终计算的结果如何是0就不填充, 如果不是0就填充
  

/*顺时针*/
oCtx.moveTo(100,100);
oCtx.lineTo(300,100);
oCtx.lineTo(300,300);
oCtx.lineTo(100,300);
oCtx.closePath();/*绘制当前点到起始点*/
/*逆时针*/
oCtx.moveTo(250,150);
oCtx.lineTo(150,150);
oCtx.lineTo(150,250);
oCtx.lineTo(255,255);
oCtx.strokeStyle = "cornflowerblue";
oCtx.closePath();/*绘制当前点到起始点*/
/*同一路径填充*/
oCtx.fill();
oCtx.fillStyle = "cornflowerblue"

例子4：绘制虚线

• 1.setLineDash
  [5,10] 数组是用来描述你的排列方式的

• 2.getLineDash
  获取虚线的排列方式 获取的是不重复的那一段的排列方式

• 3.lineDashOffset
  设置虚线的偏移位

 oCtx.moveTo(100, 100);
oCtx.lineTo(400, 100);
oCtx.lineWidth = 20;
oCtx.strokeStyle = "salmon";
// oCtx.setLineDash([5, 20]);//绘制虚线([第一段（实线）， 第二段（虚线）])
oCtx.setLineDash([5, 10, 20]);//绘制虚线([第一段（实线）， 第二段（虚线），第三段（实线）])。
绘出的图为5（实），10（虚），20（实），5（虚），10（实），20（虚）为一组，重复下去。
console.log(oCtx.getLineDash());//获取不重复的距离值。 [0: 5,1: 10,2: 20,3: 5,4: 10,5: 20]
oCtx.lineDashOffset = 50;//让虚线往左（负数）右（正数）移动
oCtx.stroke();