JS图片画方块定位坐标

最新推荐文章于 2023-10-24 13:42:52 发布

bit小兵

最新推荐文章于 2023-10-24 13:42:52 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 json ViewUI

原文链接：http://www.cnblogs.com/phper8/p/10410687.html

这篇博客介绍了如何利用JavaScript在图片上精确地画出方块，并探讨了如何获取这些方块的定位坐标。内容主要针对前端开发者，涉及到的知识点包括JavaScript基础、DOM操作以及JSON数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<canvas id="canvas" width="600" height="300" style="border: 1px solid #000;"></canvas>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script>
    var layer=0;
    CanvasExt = {
        drawRect:function(canvasId,penColor,strokeWidth){
            var that=this;
            that.penColor=penColor;
            that.penWidth=strokeWidth;

            var canvas=document.getElementById(canvasId);
            //canvas 的矩形框
            var canvasRect = canvas.getBoundingClientRect();
            //