[英]HTML5 canvas alternative to putImageData
is there another method to copy region of pixels from (let say) Canvas A to canvas B other than using respectively getImageData
and putImageData
. 除了分别使用
getImageData
和putImageData
之外,还有另一种方法可以将像素区域从(例如)画布A复制到画布B中。
also, when copy to Canvas B it should be rounded like a paint brush not rectangle. 同样,当复制到画布B时,它应像油漆刷一样变圆而不是矩形。
To copy content from one canvas to another you can use drawImage()
. 要将内容从一个画布复制到另一个画布,可以使用
drawImage()
。 This method can take image, canvas or video as image source. 此方法可以将图像,画布或视频作为图像源。
To draw rounded there are two ways: 进行四舍五入有两种方法:
This method assumes the target canvas is empty. 此方法假定目标画布为空。 First set up a circle on target canvas (
ctx
being context for canvas B/target/destination): 首先在目标画布上建立一个圆圈(
ctx
是画布B / target / destination的上下文):
ctx.beginPath(); // clear previous path (if any)
ctx.arc(centerX, centerY, radius, 0, 6.283); // 1) draw a full arc on target
ctx.fill(); // fill with default color
1) 6.283 = 2 x PI 1)6.283 = 2 x PI
This will draw a circle and fill it (make sure alpha channel is set to full). 这将绘制一个圆圈并填充它(确保Alpha通道设置为完整)。 Then change composite mode and draw in canvas A:
然后更改复合模式并在画布A中绘制:
ctx.globalCompositeOperation = 'source-in'; // change comp. mode
ctx.drawImage(canvasA, 0, 0); // draw canvas A
ctx.globalCompositeOperation = 'source-over'; // reset to default
This is similar to method A but target canvas may contain data. 这类似于方法A,但目标画布可能包含数据。 The cons with this method is that some browsers will leave a rough (aliased) edge.
此方法的缺点是某些浏览器会留下粗糙(锯齿)的边缘。 The basis is similar - first define a full arc as path but don't fill it:
基础是相似的-首先将完整的弧定义为路径,但不要填充它:
ctx.beginPath();
ctx.save(); // for removing clip later
ctx.arc(centerX, centerY, radius, 0, 6.283); // draw a full arc on target
ctx.clip(); // define clip
ctx.drawImage(canvasA, 0, 0); // draw canvas A
ctx.restore(); // remove clip
If you want to change the size and position of canvas A when drawn to canvas B then look at the documentation for drawImage()
to see the options it comes with. 如果要在绘制到画布B时更改画布A的大小和位置,请查看
drawImage()
的文档以查看其附带的选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.