在图片上进行框选区域

最新推荐文章于 2024-03-15 09:32:17 发布

啃火龙果的兔子

最新推荐文章于 2024-03-15 09:32:17 发布

阅读量3.1k

点赞数

分类专栏：开发DEMO 文章标签： canvas

本文链接：https://blog.csdn.net/qq_43592064/article/details/105990109

版权

开发DEMO 专栏收录该内容

144 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>框选</title>
</head>
<style>
  div {
    width: 300px;
    height: 300px;
    object-fit: cover;
    position: relative;
  }
  img {
    position: absolute;
    width: 300px;
    height: 300px;
  }
  #canvas {
    position: absolute;
    height: 300px;
    width: 300px;
  }
</style>
<body>
  <div>
    <img src="./1.png" alt="">
    <canvas id='canvas'></canvas>
  </div>
</body>
<script type="text/javascript">
  function draw(id) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象
    context.strokeStyle = "red";  //图形边框的填充颜色
    context.lineWidth = 2;  //用宽度为 5 像素的线条来绘制矩形:
    context.strokeRect(40, 10, 120, 60);  //绘制矩形（无填充）参数分别代表下x,y，长，宽
  }
  draw("canvas");
</script>
</html>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

啃火龙果的兔子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在图片上进行框选区域

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>框选</title>...
复制链接

扫一扫