/*主要功能：
* 1.滑鼠繪製凸多邊形
* 2.拖動多邊形頂點座標，可修改多邊形
* 2.凸多邊形內巢狀多個多邊形
* 3.判斷是否在監控區內
* */
exports.install = function
(vue, options)
//滑鼠按下
canvas.onmousedown = function
(event)
}}else
//滑鼠移動
canvas.onmousemove = function
(ev)
}//雙擊；取消繪製；儲存畫布；獲取最終所有點的座標
canvas.ondblclick = function
(e)
shieldposi.push(dbposi);
var shieldendposis = _sthis.endposi(shieldposi,sendshieldposi);//最終座標
drawline(ctx,dbposi.x,dbposi.y,shieldposi,2,"black","skyblue","rgba(255,255,255,0.8)"); //顯示最後乙個頂點的圓形樣式
shield_count++;
allshieldposi.push(sendshieldposi);
_sthis.$store.commit("getshieldposi",allshieldposi)
console.log("所有遮蔽區最終座標*****===",_sthis.$store.state.shieldendposi);
canvas.onmousemove = null;
//儲存畫布；清空原陣列
imgdata = ctx.getimagedata(0,0,canvas.width,canvas.height);
sendshieldposi = ;
shieldposi = ;
dbclick = true;//
}//--------------------繪製遮罩的函式---------------------------------------
function
drawline
(ctx,movex,movey,posi,linewidth,linecolor,arcfillcolor,areacolor)else
//--多邊形----
ctx.beginpath();
ctx.linejoin = 'round';//線段連線點
ctx.strokestyle = linecolor;
ctx.fillstyle = areacolor;
ctx.linewidth = linewidth;
//繪製直線線段起始座標點
if(posi.length!=0)
for(var i = 0; i < posi.length ; i++)
ctx.lineto(movex,movey);//滑鼠移動的座標位置
ctx.fill();
ctx.closepath();
ctx.stroke();
//---頂點----
ctx.beginpath();
ctx.fillstyle = arcfillcolor;
for(var i =0; i < posi.length;i++)
}} vue.prototype.clearallshield = function
(canvas,ctx)
}
canvas繪製在畫布中心的一段文字
lang en charset utf 8 titletitle canvas style head width 600 height 400 canvas var mycanvas document.queryselector canvas var ctx mycanvas.getcontext ...
獲取畫布上的滑鼠位置
在畫布上繪製一些效果的時候，會需要用到畫布上的滑鼠的位置.會用到的知識點 1.getboundingclientrect 這個方法返回乙個矩形物件，包含四個屬性 left top right和bottom。分別表示元素各邊與頁面上邊和左邊的距離 var box document.getelement...
畫布canvas標籤，並且在畫布上畫簡單的形狀
今天整畫布，半天下來老是錯，結果 id c1 width 400 height 400 瀏覽器不支援 原來畫布的寬度和高度需要在標籤定義的時候確定，並且後面是不能帶有px這個單位的，比如 錯誤的定義 c1 ogc.fillstyle yellow ogc.fillrect 10,10 200 100...