调用绘制多个多边形
let ary = [
{
color:'red',//线条颜色 默认黑色
size:1,//线条粗细 默认 1
background:'',//填充颜色 默认透明
data:[{
x:100,y:173},{
x:280,y:163},{
x:280,y:380},{
x:150,y:380}] //多边形点集合
},
{
color:'green',
size:1,
background:'',
data:[{
x:200,y:173},{
x:380,y:163},{
x:380,y:380},{
x:250,y:380}]
},
{
color:'blue',
size:1,
background:'',
data:[{
x:230,y:373},{
x:480,y:363},{
x:280,y:180},{
x:350,y:180},{
x:200,y:400}]
}
]
initCanvas('video','my-canvas',ary)
绘制多边形方法
/**
*
* @param c canvas对象
* @param arr 多边形各个坐标
* @param color 线条颜色
* @param size 线条粗细
* @param background 背景色
*/
function drawLine(c,arr,color,size,background){
c.beginPath()
arr.forEach(t=>{
c.lineTo(t.x,t.y)
})
c.closePath()
c.fillStyle = background||"transparent";
c.strokeStyle = color||'#000';
c.lineWidth = size||1;
c.fill();
c.stroke();
}
绘制多个多边形
/**
* 加载划线
* @param eleId 需要画多边形的div id
* @param drawId 画布ID 自定义
* @param arr 多边形数据集合
*/
function initCanvas(eleId,drawId,arr){
var demo = document.getElementById(eleId)
let d_h = demo.offsetHeight
let d_w = demo.offsetWidth
let rat_h = d_h/1080
let rat_w = d_w/1920
arr.forEach(t=>{
t.data.forEach(d=>{
d.x *= rat_w
d.y *= rat_h
})
})
let ele = document.getElementById(drawId)
if(!ele){
ele = document.createElement('canvas')
ele.id = drawId
ele.style.width = d_w + 'px'
ele.style.height = d_h + 'px'
ele.style.position = 'absolute'
ele.style.background = 'none'
ele.style.zIndex = '999'
ele.style.top = '0px'
demo.parentNode.appendChild(ele)
}
var c = document.getElementById(drawId).getContext("2d");
c.clearRect(0,0,d_w,d_h)
arr.forEach(t=>{
drawLine(c,t.data,t.color,t.size,t.background)
})
}