北极动力网站建设,企业简介宣传片视频,网站开发保密协议,网站设计怎么样简言
学习canvas如何绘制图片或视频。
绘制图像
给定一个图像#xff0c;一般使用drawImage()方法绘制。
drawImage 绘制图像
Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种在画布#xff08;Canvas#xff09;上绘制图像的方式。 语法一般使用drawImage()方法绘制。
drawImage 绘制图像
Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种在画布Canvas上绘制图像的方式。 语法 指定绘制位置快速绘制 drawImage(image, dx, dy); 指定绘制位置宽高快速绘制 drawImage(image, dx, dy, dWidth, dHeight); 指定图像被绘制区域和绘制区域绘制 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 使用方法有三种 参数 image 绘制到上下文的元素。允许任何的画布图像源例如HTMLImageElement、SVGImageElement (en-US)、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas 或 VideoFrame (en-US)。 sx 可选 需要绘制到目标上下文中的image 的矩形裁剪选择框的左上角 X 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。 sy 可选 需要绘制到目标上下文中的image 的矩形裁剪选择框的左上角 Y 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。 sWidth 可选 需要绘制到目标上下文中的image 的矩形裁剪选择框的宽度。如果不说明整个矩形裁剪从坐标的 sx 和 sy 开始到 image 的右下角结束。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。 sHeight 可选 需要绘制到目标上下文中的image的矩形裁剪选择框的高度。使用负值将翻转这个图像。 dx image 的左上角在目标画布上 X 轴坐标。 dy image 的左上角在目标画布上 Y 轴坐标。 dWidth image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明在绘制时 image 宽度不会缩放。注意这个参数不包含在 3 参数语法中。 dHeight image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明在绘制时 image 高度不会缩放。注意这个参数不包含在 3 参数语法中。
注意
当 drawImage() 需要在 HTMLVideoElement 工作时仅当 HTMLMediaElement.readyState 大于 1 时 drawImage() 才能正常工作。在绘制裁剪和/或缩放时drawImage() 将始终使用源元素的固有尺寸以 CSS 像素为单位。在某些旧版本浏览器中drawImage() 将忽略图像中的所有 EXIF 元数据包括方向。此行为在 iOS 设备上尤其麻烦。你应该自己检测方向并使用 rotate() 使其正确。
示例
const canvas document.getElementById(canvas);
const ctx canvas.getContext(2d);
const image document.getElementById(source);image.addEventListener(load, (e) {ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
});
ImageData 绘制图像
获得一个ImageData 对象后使用putImageData()方法绘制。 可以通过CanvasRenderingContext2D.getImageData()获得一个ImageData 对象用来描述 canvas 区域隐含的像素数据。 语法 ImageData ctx.getImageData(sx, sy, sw, sh); 参数 sx 将要被提取的图像数据矩形区域的左上角 x 坐标。 sy 将要被提取的图像数据矩形区域的左上角 y 坐标。 sw 将要被提取的图像数据矩形区域的宽度。 sh 将要被提取的图像数据矩形区域的高度。
getImageData()
CanvasRenderingContext2D.getImageData() 返回一个ImageData对象用来描述 canvas 区域隐含的像素数据这个区域通过矩形表示起始点为*(sx, sy)、宽为sw、高为sh。*
putImageData()
CanvasRenderingContext2D.putImageData() 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。如果提供了一个绘制过的矩形则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。 语法 void ctx.putImageData(imagedata, dx, dy); void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight); 参数 imageData ImageData包含像素值的数组对象。 dx 源图像数据在目标画布中的位置偏移量x 轴方向的偏移量。 dy 源图像数据在目标画布中的位置偏移量y 轴方向的偏移量。 dirtyX 可选 在源图像数据中矩形区域左上角的位置。默认是整个图像数据的左上角x 坐标。 dirtyY 可选 在源图像数据中矩形区域左上角的位置。默认是整个图像数据的左上角y 坐标。 dirtyWidth 可选 在源图像数据中矩形区域的宽度。默认是图像数据的宽度。 dirtyHeight 可选 在源图像数据中矩形区域的高度。默认是图像数据的高度。
示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title图像剪辑/titlestylehtml,body {width: 100vw;height: 100%;margin: 0;padding: 0;}.box {box-sizing: border-box;width: 100%;height: 100%;padding: 24px;}.box-content {margin-top: 16px;box-sizing: border-box;width: 100%;/* height: 500px; *//* display: flex; */align-items: center;text-align: center;border: 1px solid #000;}#origin {width: 500px;height: 500px;border: 1px solid #000;}/style
/headbodydiv classboxdivh1图像查看/h1input typefile namefile idfile/divdiv classbox-contentcanvas idorigin width500 height500/canvas/divdiv/div/divscriptconst file document.getElementById(file);const origin document.getElementById(origin);const ctx origin.getContext(2d);const img document.createElement(img);// 辅助线let fx 0let fy 0let showf false// 图片缩放let scale 1 // 图片缩放比例let dx 0 // 图片偏移 xlet dy 0// 图片偏移 ylet dw origin.widthlet dh origin.heightlet modify falseorigin.addEventListener(mousedown, (e) {modify trueshowf truelastX e.offsetXlastY e.offsetY});origin.addEventListener(mousemove, (e) {if (!ctx) returnlet x e.offsetXlet y e.offsetYif (modify) {fx xfy ydx (x - lastX)dy (y - lastY)lastX xlastY ydrawOperatingLine()}})origin.addEventListener(mouseup, (e) {if (modify) {modify falseshowf falsedrawOperatingLine()}})origin.addEventListener(contextmenu, (e) {e.preventDefault()if (img.width img.height) {scale origin.width / img.width} else {scale origin.height / img.height}dx (origin.width - scale * img.width) / (origin.width / e.offsetX)dy (origin.height - scale * img.height) / (origin.height / e.offsetY)drawOperatingLine()})origin.addEventListener(wheel, (e) {const { deltaY } eif (deltaY 0) { // 下滑放大scale 0.1} else if (scale 0.1) { // 上滑缩小scale - 0.1}dx (origin.width - scale * img.width) / (origin.width / e.offsetX)dy (origin.height - scale * img.height) / (origin.height / e.offsetY)drawOperatingLine()})file.addEventListener(change, (e) {const file e.target.files[0];const reader new FileReader();reader.readAsDataURL(file);reader.onload (e) {img.src e.target.result;img.onload () {// 更新图片缩放比例if (img.width img.height) {scale origin.width / img.width} else {scale origin.height / img.height}drawOperatingLine(true)}}})// 绘制裁剪控制图像function drawOperatingLine(init false) {ctx.clearRect(0, 0, origin.width, origin.height)// 绘制图像dx init ? (origin.width - scale * img.width) / 2 : dx // 图片偏移 xdy init ? (origin.height - scale * img.height) / 2 : dy // 图片偏移 ydw scale * img.widthdh scale * img.heightctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);// 辅助线if (showf) {ctx.save()ctx.beginPath();ctx.strokeStyle redctx.setLineDash([3, 3])ctx.moveTo(0, fy);ctx.lineTo(origin.width, fy);ctx.moveTo(fx, 0);ctx.lineTo(fx, origin.height);ctx.stroke();ctx.restore()}}/script
/body/html结语
结束了。
