如何在 HTML5 中使用 drawImage() 绘制图像?
html5web developmentfront end technology更新于 2024/3/1 1:48:17
"canvas"元素仅用作视觉对象的容器;绘制图形需要使用脚本语言。它是一个过程化的低级模型，没有用于更新位图的内部场景。
我们使用 drawImage() 函数在画布上绘制图像。此功能将视频、画布或图片传输到画布上。
语法
context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);
其中，
Img − 确定是否使用视频、画布或图像。
Sx − 裁剪的起始 x 坐标。
Sy − 裁剪开始的 y 点。
Swidth − 裁剪后图像的宽度。
Sheight − 裁剪后图像的高度。
Width − 将使用的图像宽度(拉伸或缩小图像)。
Height − 将使用的图像高度(拉伸或缩小图像)图像)。
X − 图像在画布上位置的 x 坐标。
Y − 画布上放置图片的 y 坐标。
以下是示例……
示例 1
使用 drawimage() 方法
在下面的示例中，我们使用 drawimage() 方法绘制图像。
<!DOCTYPE html> <html> <body> <p>Photo</p> <img id="image" src="C:\Users\Lenovo\Desktop\Tutorialspoint\1.jpg" /> <p>Canvas:</p> <canvas id="newCanvas" width="1000" height="300" style="border: 5px solid black"> </canvas> <script> window.onload = function () { var canvas = document.getElementById("newCanvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById("image"); ctx.drawImage(image, 100, 20,); }; </script> </body> </html>
执行上述脚本后，它将生成一个由使用 src 上传的图片组成的输出，并且画布将被触发并在网页上绘制与我们上传的图片相同的图片。
示例 2
添加宽度和高度属性
接下来我们使用 drawimage() 来绘制图像，并添加宽度和高度以使图像按所需尺寸绘制。
<!DOCTYPE html> <html> <body> <p>Photo</p> <img id="pic" src="C:\Users\Lenovo\Desktop\Tutorialspoint\3.jpg" /> <p>Canvas:</p> <canvas id="newCanvas" width="400" height="300" style="border: 5px solid black"> </canvas> <script> window.onload = function () { var canvas = document.getElementById("newCanvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById("pic"); ctx.drawImage(image, 100, 20,150,160); }; </script> </body> </html>
当脚本执行时，它将生成由使用 src 上传的 img 组成的输出，并且画布将被激活并绘制与我们在网页上上传的相同的 img 以及宽度和高度。
