Canvas系列 | 剪辑区域函数clip

Posted 2021-04-29 前端自习室

一、clip方法描述：

      clip方法，与路径规划函数一起使用。使用刚才的绘制路径，把它剪切为当前的绘制环境。

      canvas本来是一个大的画布，clip方法用来从原始画布中剪切任意形状和尺寸，但是一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内而不能再访问画布上的其他区域。

二、应用场景：

     1.  界面上有很多节点和链路，但是我只需要更新部分节点和链路所在区域，此时调用clip函数，然后清空该区域，最后对局部更新的区域进行绘制。如果该区域某个链路延伸到其他地方，但其他区域不受影响。只绘制剪辑区域制定的路径。从而提升性能

    2.  实现探照灯的效果

三、举例说明

   1. 圆形的探照灯

    效果如下：

  

代码：

---

var circular = {

  x: 300,

  y: 300,

  radius: 150,

 vx: Math.random() * 5 + 5,

  vy: Math.random() * 5 + 5

};

window.onload = function () {

  var myCanvas = document.getElementById("myCanvas");

  if (myCanvas.getContext("2d")) {

    myCanvas.width = 600;

    myCanvas.height = 600;

    var context = myCanvas.getContext("2d");

    drawBall(context);

  }

  else {

    return false;

  }

}

//该方法用来绘制图形 

function drawBall(cxt) {

  var canvas = cxt.canvas;

  //清空画布 

  cxt.clearRect(0, 0, canvas.width, canvas.height);

  cxt.save();

  //绘制一个与当前canvas一样大的矩形 

  cxt.beginPath();

  cxt.fillStyle = "#000";//黑色背景 

  cxt.fillRect(0, 0, canvas.width, canvas.height);

  cxt.closePath();

  //从原来的画布中剪辑出一个圆形 

  cxt.beginPath();

  cxt.arc(circular.x, circular.y, circular.radius, 0, Math.PI * 2);

  cxt.fillStyle = "#fff";//白色背景 

  cxt.fill();

  //clip():从原始画布中剪切任意形状和尺寸。 

  //一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域） 

  cxt.clip();

  cxt.closePath();

  //绘制内容 

  cxt.font = "bold 120px Arial";

  cxt.textAlign = "center";

  cxt.textBaseline = "middle";

  cxt.fillStyle = "#058";

  cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 4);

  cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 2);

  cxt.fillText("CANVAS", canvas.width / 2, canvas.height * 3 / 4);

  cxt.restore();

} 

---

  

2. 动态的圆形探照灯

这个实例效果与第一个实例大同小异，只是第一个是静态的，这个是动态的。

---

var circular = {

  x: 300,

  y: 300,

  radius: 150,

 vx: Math.random() * 5 + 5,

  vy: Math.random() * 5 + 5

};

//....获取canvas对象与绘制圆形代码与上面的相同，此处就一一省略了

window.setInterval(function () {

  drawBall(context);

  update(myCanvas.width, myCanvas.height, 0);

}, 40);

//更新圆形运动路径

function update(width, height) {

  circular.x += circular.vx;

  circular.y += circular.vy;

  if (circular.x - circular.radius <= 0) {

    circular.vx = -circular.vx;

    circular.x = circular.radius;

  }

  if (circular.x + circular.radius >= width) {

    circular.vx = -circular.vx;

    circular.x = width - circular.radius;

  }

  if (circular.y - circular.radius <= 0) {

    circular.vy = -circular.vy;

    circular.y = circular.radius;

  }

  if (circular.y + circular.radius >= height) {

    circular.vy = -circular.vy;

    circular.y = height - circular.radius;

  }

}

---