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

直接先上效果

JS/Canvas在图片上画点画线不规则图形,并获取图片上的坐标_第1张图片

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

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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)">不支持canvascanvas>
        div>
        
        <div class="container">div>
    div>
div>

<input type="text" name="coor" id="x_y" placeholder="实时坐标" >
<input type="button" name="clear" id="clear" onclick="clearCtx()" value="清除画布">
<input type="button" value="添加区域" class="btn" id="btn_add" /><br/>
<input type="text" name="coor" id="x_y1" placeholder="坐标" ><br/>
<input type="text" name="coor" id="x_y2" placeholder="坐标" ><br/>
<input type="text" name="coor" id="x_y3" placeholder="坐标" >

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">script>
<script type="text/javascript">
    $('.wrap').click(function(e){
        var radius=4;//半径
        var offset=$(this).offset();
        var top=e.pageY-offset.top-radius+"px";
        var left=e.pageX-offset.left-radius+"px";
        //$('.wrap').append('
');
$('.container').html('
+top+';left:'+left+'">
'
); // 在页面创建 box // var active_box = document.createElement("div"); // active_box.id = "container"; // active_box.className = "ball"; // active_box.style.top = top ; // active_box.style.left = left ; // document.body.appendChild(active_box); // active_box = null; //alert(top+"_"+left); $("#x_y").val(top+","+left);//赋值 })
script> <script type="text/javascript"> var cvs = document.getElementById("cvs"); var cvsClientRect = cvs.getBoundingClientRect(); var points = []; cvs.addEventListener("mousedown", mousedownHandler, false); var ctx = cvs.getContext('2d'); var flag = false; function mousedownHandler (event){ if(event.button == 0 && !flag) { points.push({ x: event.pageX - cvsClientRect.x, y: event.pageY - cvsClientRect.y }); if(points.length>=1) { cvs.addEventListener("mousemove", mousemoveHandler, false); } drawPolygon(points); } else if(event.button == 2) { flag = true; cvs.removeEventListener("mousemove", mousemoveHandler); } } //鼠标双击 function mousedbclick(event) { flag = true; cvs.removeEventListener("mousemove", mousemoveHandler); } function drawPolygon(points) { ctx.clearRect(0,0,416,416); ctx.strokeStyle = '#000'; ctx.beginPath(); ctx.moveTo(points[0].x,points[0].y); for(var i=1;i<points.length;i++) { ctx.lineTo(points[i].x,points[i].y); //赋值 $("#x_y"+ i).val(points[i].x+","+points[i].y);//赋值 } ctx.closePath(); ctx.stroke(); } function mousemoveHandler(event) { drawPolygon(points.concat({ x: event.pageX - cvsClientRect.x, y: event.pageY - cvsClientRect.y })); } function clearCtx() { // var c=document.getElementById("cvs"); // var cxt=c.getContext("2d"); // // cxt.fillStyle="#ffffff"; // // cxt.beginPath(); // // cxt.fillRect(0,0,c.width,c.height); // // cxt.closePath(); points=[]; ctx.clearRect(0,0,416,416); // var c1 = document.getElementById('cvs'); // c1.remove();//用于清除canvas 重要 // $("#Div1").html("添加控件"); // cvs.addEventListener("mousedown", mousedownHandler, false); // flag = false; //window.location.replace("index333.html"); } $("#btn_add").click(function(){ flag = false; cvs.addEventListener("mousedown", mousedownHandler, false); cvs.addEventListener("dblclick", mousedbclick, false); }); script> body> html>

你可能感兴趣的:(JavaWeb学习笔记,javascript,canvas,H5)