canvas 绘制图像

最新推荐文章于 2024-10-30 15:26:31 发布

阿豪boy

最新推荐文章于 2024-10-30 15:26:31 发布

阅读量93

点赞数

文章标签： canvas js opencv css html

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065758

版权

原文链接: canvas 绘制图像

上一篇: tfjs 配合opencvjs 读取网页图像并显示

下一篇: opencvjs 磨皮美颜

坐标系和绘制函数说明

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

默认大小并不是显示大小,需要在js中设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #cvs {
      height: 500px;
      width: 500px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="cvs"></canvas>
<script>
  let cvs = document.getElementById('cvs')
  console.log(cvs.height, cvs.width) // 150 300
  cvs.width = 500
  cvs.height = 500
  console.log(cvs.height, cvs.width) 

</script>
</body>
</html>

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image

绘制到上下文的元素。允许任何的 canvas 图像源( CanvasImageSource )，例如： CSSImageValue ， HTMLImageElement ， SVGImageElement ， HTMLVideoElement ， HTMLCanvasElement ， ImageBitmap 或者 OffscreenCanvas 。

sx 可选

需要绘制到目标上下文中的， image 的矩形（裁剪）选择框的左上角 X 轴坐标。

sy 可选

需要绘制到目标上下文中的， image 的矩形（裁剪）选择框的左上角 Y 轴坐标。

sWidth 可选

需要绘制到目标上下文中的， image 的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的 sx 和 sy 开始，到 image 的右下角结束。

sHeight 可选

需要绘制到目标上下文中的， image 的矩形（裁剪）选择框的高度。

dx

image 的左上角在目标canvas上 X 轴坐标。

dy

image 的左上角在目标canvas上 Y 轴坐标。

dWidth 可选

image 在目标canvas上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 宽度不会缩放。

dHeight 可选

image 在目标canvas上绘制的高度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 高度不会缩放。

对于img标签对象,绘制时不会考虑显示的大小,比如显示为100x100,但图片本身为1920x1200,绘制时会使用图片本身大小

绘制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .img {
      max-width: 100px;
      max-height: 100px;
      margin: 10px;
    }

    .ctx {
      width: 300px;
      height: 300px;
      border: 1px solid deepskyblue;
      margin: 10px;
    }

    .main {
      display: flex;
      flex-direction: column;
    }
  </style>
</head>
<body>
<div class="main">

  <img src="./default.jpg" class="img" id="img">
  <div>
    <canvas id="ctx1" class="ctx"></canvas>
    <canvas id="ctx2" class="ctx"></canvas>
    <canvas id="ctx3" class="ctx"></canvas>
    <canvas id="ctx4" class="ctx"></canvas>
  </div>
</div>

<script>
  var canvas1 = document.getElementById("ctx1");
  var ctx1 = canvas1.getContext("2d");
  var canvas2 = document.getElementById("ctx2");
  var ctx2 = canvas2.getContext("2d");
  var canvas3 = document.getElementById("ctx3");
  var ctx3 = canvas3.getContext("2d");
  var canvas4 = document.getElementById("ctx4");
  var ctx4 = canvas4.getContext("2d");

  var image = document.getElementById('img');
  console.log(image)

  ctx1.drawImage(image, 10, 20);
  ctx2.drawImage(image, 10, 20, 100, 100);
  ctx3.drawImage(image, 10, 20, 1000, 2000, 10, 20, 100, 100);

//  填充绘制
  ctx4.drawImage(image, 0, 0, canvas4.width, canvas4.height);

</script>
</body>
</html>