canvas核心内容

canvas核心内容

1、概念

canvas是画布，其实就是h5的一个新标签，他自己有一套画图的语法标准。

canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas（这意味着咱得给canvas设个id）：

<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
//操作canvas的代码...
</script>

注意最好在一开始的时候就给canvas设置好其宽高（若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素），而且不能使用css来设置（会被拉伸，有失真的风险），建议直接写于canvas标签内部：

<canvas id="myCanvas" width="200" height="200"></canvas>

当然，也可以在脚本中设置：

<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas");
c.width=200;
c.height=200;
</script>

要知道的是;超出此大小范围的部分是不可见的。顾名思义，可以把canvas看成一块画布，其大小是咱设定好的宽高，那么无论你怎么画，画布外的地方自然是画不到的。

.getContext() 是canvas的绘图对象/方法，要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。

.getContext()只接受一个参数，该参数用于获取canvas的绘图环境，例如.getContext(“2d”)表示该canvas的绘图环境为2D平面（可以绘制文本、直线、弧线、矩形、圆形等）。还有3D环境，自行研究。

提示：

vscode中获取提示内容，在script脚本中加入：

        /** @type {HTMLCanvasElement} */

上面这一行代码，表示引入canvas，就会出现提示内容。

2、绘制直线

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10);   //定义绘画开始的位置
ctx.lineTo(150,50);  //画一条直线，结束点坐标是x=150,y=50
ctx.stroke();  //描边
</script>

效果如下：

• .moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置（注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口，对canvas来说，最左上角的点的坐标是(0,0)）

• .lineTo(x坐标 , y坐标) 顾名思义，就是画一条直线到某个点，很好理解。需要知道的是此方法仅仅做路径运动，而不存在任何视觉上的绘图效果（上色、描边）。如果不另外设置moveTo则自动把上一条边的终点作为下一条边的起点。

• .stroke() 描边方法，canvas想要运动路径轨迹能有视觉效果，需要使用相应的上色/描边方法。

• .strokeStyle = “red”; 设定描边颜色为红色，只要写在.stroke()方法前面即可。

• ctx.strokeStyle可获值的形式有三种：用的时候查一查

  ctx.strokeStyle=color|gradient|pattern;  //即支持 “颜色/渐变/图案笔刷” 的赋值
  

如果要绘制两条不一样颜色的直线，就需要给第二条边绘制时，开启另外一条轨道，不然就算设置了两个颜色也不会显示出两条不同颜色的线。

案例：

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d"); 
  ctx.moveTo(0,0);   
  ctx.lineTo(150,50);  
  ctx.lineTo(20,100); 
  ctx.strokeStyle = "blue";    //设定描边颜色为蓝色
  ctx.stroke();  
  
  ctx.beginPath();  //告诉canvas咱们要重新绘制一条全新的路径了，之前画的东西从此再无关系
  ctx.moveTo(90,90); 
  ctx.lineTo(80,150);  
  ctx.strokeStyle = "red";    //设定描边颜色为红色
  ctx.stroke();  
</script>

效果如下：

3、绘制矩形

canvas本身就自带绘制矩形的方法；ctx.rect(x,y,w,h);

参数说明：

• x,y:表示起点坐标，以画布左上角为坐标中心，x向右增大，y向下增大。

• w，h：分别代表矩形的宽高。

<canvas id="box" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById("box");

    var ctx = canvas.getContext("2d");

    ctx.strokeStyle = "red";

    ctx.fillStyle = "blue";

    ctx.lineWidth = 5;

    ctx.beginPath();

    ctx.rect(100, 100, 200, 200);

    ctx.closePath();  //闭合通道

    ctx.fill();  //填充

    ctx.stroke(); //描边
</script>

效果如下：

如果我们想给一个图像不仅要填充，还要绘制边框，那我们要先填充，后绘制边框，这样我们的边框才会正常显示。

所以还有另外的方法：fillRect(x,y,w,h)和strokeRect(x,y,w,h);

<canvas id="box" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById("box");
    var ctx = canvas.getContext("2d");

    ctx.strokeStyle = "red";
    ctx.fillStyle = "blue";
    ctx.lineWidth = 5;
    ctx.strokeStyle = '