canvas进阶之用户交互

前言

我们画一个canvas，并不希望仅仅当作图片来使用，需要与之交互，那如何在canvas做交互呢？

API

• ctx.isPointInPath(x,y) 判断该坐标是否在当前绘制的路径内
  • 利用这个函数可以实现canvas的交互性
• getBoundingClientRect()： 用于获取元素位置。获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
  • getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。
  • 该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；
    • 这里的top、left和css中的理解很相似，
    • width、height是元素自身的宽高，
    • 但是right是指元素右边界距窗口最左边的距离，
    • bottom是指元素下边界距窗口最上面的距离
• 坐标转换： 获取当前鼠标点击的对应的canvas坐标

var bounding = canvas.getBoundingClientRect() || getClientRect();
var x = e.clientX - bounding.left;
var y = e.clientY - bounding.top;

// 判断该坐标是否在当前绘制的路径内
if (ctx.isPointInPath(x,y)) {
  // 做交互 
}

举个🌰

demo地址

放大镜

• 两个canvas，第一个canvas缩小图片，第二个canvas隐藏， 画出原始图片的大小
  • ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  • offctx.drawImage(image, 0, 0);
• 使用离屏canvas，利用裁剪clip()，创建放大镜

demo地址