canvas常见问题解决

Posted 2021-04-29 e佰web前端

1 解决在canvas获取的坐标和窗口的坐标一样的问题

 

当用到鼠标事件的时候常要获取当前鼠标所在X，Y值，如果鼠标事件作用的是窗口对象时，获取鼠标的X,Y很简单，但当鼠标事件作用的是窗口里的一个对象的时候，就要考虑对象在窗口的位置。

 

由于canvas对象的特殊性，在这里我要分析的是当鼠标事件作用在canvas对象中时，需要获取的X,Y的坐标的问题 。

 

在这里需要用到一个方法：getBoundingClientRect()来获取canvas这个矩形对象，

 

html内容

 

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

 

Css内容

 

#canvas{

width:200px;

height:200px;

margin-left:50px;

margin-top:50px;

border:1px solid silver;

}

 

javascript部分

 

let canvas=document.querySelector('#canvas');

canvas.onclick=(evt)=>{

let windowClientX=evt.clientX;

let windowClientY=evt.clientY;

let canvasClient = windowToCanvas(windowClientX, windowClientY);

console.log(canvasClient)

}

let windowToCanvas = (windowClientX, windowClientY)=>{

let canvasClient=canvas.getBoundingClientRect();

let canvasClientX = windowClientX - canvasClient.left;

let canvasClientY = windowClientY - canvasClient.top;

return{

canvasX: canvasClientX,

canvasY: canvasClientY

}

}

 

 

2  getImageData() 方法

 

JavaScript 语法

let imgData=context.getImageData(x,y,width,height);

参数值

下面的代码通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布：

 

let c = document.querySelector("#myCanvas");

let ctx = c.getContext("2d");

ctx.fillStyle = "red";

ctx.fillRect(10, 10, 50, 50);

let copy = () => {

let imgData = ctx.getImageData(10, 10, 50, 50);

ctx.putImageData(imgData, 10, 70);

}

copy();

 

定义和用法

 

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)

G - 绿色 (0-255)

B - 蓝色 (0-255)

A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

 

例子：

以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：

 

red = imgData.data[0];

green = imgData.data[1];

blue = imgData.data[2];

alpha = imgData.data[3];

 

提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素，并改变其颜色值：

 

red = 255 - old_red;

green = 255 - old_green;

blue = 255 - old_blue;

 

使用 getImageData() 来反转画布上的图像的每个像素的颜色。

 

JavaScript:

 

let c = document.querySelector("#myCanvas");

let ctx = c.getContext("2d");

let img = document.querySelector("#pic");//此处获取的为图片id

ctx.drawImage(img, 0, 0);

let imgData = ctx.getImageData(0, 0, c.width, c.height);

// 反转颜色

for (let i = 0; i < imgData.data.length; i += 4) {

imgData.data[i] = 255 - imgData.data[i];

imgData.data[i + 1] = 255 - imgData.data[i + 1];

imgData.data[i + 2] = 255 - imgData.data[i + 2];

//imgData.data[i + 3] = 255;

}

ctx.putImageData(imgData, 0, 0);

 

3 canvas arcTo() 方法

 

定义和用法

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

提示：请使用 stroke() 方法在画布上绘制确切的弧。

 

JavaScript 语法：

context.arcTo(x1,y1,x2,y2,r);

参数值

 

 

 

实例

在画布上创建介于两个切线之间的弧：

Javascript

 

let c = document.getElementById("myCanvas");

let ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20, 20); // 创建开始点

ctx.lineTo(100, 20); // 创建水平线

ctx.arcTo(150, 20, 150, 70, 50); // 创建弧

ctx.lineTo(150, 120); // 创建垂直线

ctx.stroke(); // 进行绘制

 

4 quadraticCurveTo() 方法

 

JavaScript 语法：

context.quadraticCurveTo(cpx,cpy,x,y);

参数值

 

 

 

定义和用法

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

 

开始点：moveTo(20,20)

控制点：quadraticCurveTo(20,100,...,...)

结束点：quadraticCurveTo(...,...,200,20)

 

绘制一条二次贝塞尔曲线：

JavaScript:

 

let c = document.querySelector("#myCanvas");

let ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20, 20);

ctx.quadraticCurveTo(20, 100, 200, 20);

ctx.stroke();