JS/Canvas在图片上画点画线不规则图形，并获取图片上的坐标

最新推荐文章于 2024-11-18 13:53:42 发布

连接数据库

最新推荐文章于 2024-11-18 13:53:42 发布

阅读量6.4k

点赞数 4

分类专栏： JavaWeb学习笔记文章标签： javascript canvas H5

本文链接：https://blog.csdn.net/vpqtxzmzezeqjj9977/article/details/107980861

版权

直接先上效果

在这里插入图片描述

操作说明：点【添加区域】鼠标进行画—— 右键结束画点【清楚画图】画布初始化，再点【添加区域】画，反复反复，，，，

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .wrap{
    

            background: #ccc;
            position: relative;
        }
        .ball{
    
            width:5px;
            height: 5px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
        .box {
    
            width:416px;
            height:416px;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="wrap">

        <div class="canvas-box" style="width: 416px; height: 416px;" id="Div1"> 
            <canvas id="cvs" width="416" height="416" style="background:url(123.png)">不支持canvas</canvas