锐客网

  1. 首页 > it技术 > >

canvas|canvas在图片上画矩形框和点，并控制显隐

1、定义document canvas元素



【canvas|canvas在图片上画矩形框和点，并控制显隐】2、画图片
varimageCanva = document.getElementById("image-canvas"); //获取canvas元素
var imagectx = imageCanva.getContext('2d'); //获取上下文
this.pictureCanvasCtx = imagectx;
ctx.clearRect(0,0,imageCanvas.width,imageCanvas.height); //清除图层
var img = new Image();
img.srchttps://www.it610.com/article/= '''../../../图片地址.png'
image.onload = function(){
let xRate = myCanvas.width/img.width; 算出x和y的压缩比，使得图片铺满整个canvas窗口，当然，无此需求可省略
let yRate = myCanvas.height/img.height;
ctx.drawImage(this,0,0,img.width*xRate,img.height*yRate); //this指照片，0,0起始（左上角）左边，后边两个参数是长和高
//画矩形框不同图层，当然也可同一图层
varrectCanva = document.getElementById("rect-canvas"); //获取canvas元素
var rectctx =rectCanva.getContext('2d'); //获取上下文
rectctx.beginPath();
rectctx.lineWidth=“2”； //矩形线宽
rectct.stokeStyle = 'red'; //矩形线填充
recttx.rect((坐上角的x坐标)*xRate,(左上角的y坐标)* yRate,(矩形宽)*xRate,（矩形高）*yRate);
recctx.stroke();

varpointCanva = document.getElementById("point-canvas"); //获取canvas元素
var pointctx =pointCanva.getContext('2d'); //获取上下文
pointctx.beginPath();
pointctx.stokeStyle = 'red'; //点填充
pointctx.arc((点中心x坐标)*xRate,(点中心y坐标)*yrate,1,0,2*Math.PI);
pointctx.stroke();
}
3、控制显隐通过visibility属性
例 document.getElementById(rect-canvas).style.visibility='visible'; //显示 或hidden进行隐藏

注，内网开发，代码无法粘贴，纯页面手打，错误不可避免，重在理解思路

    推荐阅读


    上一篇：看看我的奇思妙想是否可行

    下一篇：Vue|element select 下拉数据滚动分页且可搜索