<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas畫四邊形</title>
</head>
<body>
<div>
<canvas id="canvas" width="400" height="600"></canvas>
</div>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas')
context = canvas.getContext('2d')
drawRects()
canvas.onmousedown = clickPoint;
canvas.onmouseup = stopDragging;
canvas.onmousemove = dragCircle
canvas.onmouseout = stopDragging;
}
var points = {
rect1: [
{ x: 20, y: 20, isSelected: false },
{ x: 220, y: 20, isSelected: false },
{ x: 220, y: 230, isSelected: false },
{ x: 20, y: 220, isSelected: false },
],
rect2: [
{ x: 10, y: 10, isSelected: false },
{ x: 320, y: 10, isSelected: false },
{ x: 320, y: 320, isSelected: false },
{ x: 10, y: 320, isSelected: false },
]
}
// 畫圖
function drawRect(Array) {
// 設置線的樣式
// context.setLineDash([4, 2])
// 設置連線點樣式
context.lineJoin = 'round'
context.beginPath()
// 遍歷座標點
for (let i = 0; i < Array.length; i++) {
const ele = Array[i];
if (i < 1) {
context.moveTo(ele.x, ele.y);
} else {
context.lineTo(ele.x, ele.y);
}
}
context.lineWidth = 3;
// 判斷顯示不同顏色的四邊形
if(Array == points.rect1){
context.strokeStyle ='red'
}else{
context.strokeStyle ='green'
}
// 隨機顏色
// context.strokeStyle = '#'+(Math.random()*0xffffff<<0).toString(16);
context.closePath();
context.stroke();
}
// 畫點連線
function drawRects() {
// 清除畫布，準備繪製
context.clearRect(0, 0, canvas.width, canvas.height);
drawRect(points.rect1)
drawRect(points.rect2)
}
// 遍歷元素在哪一個圓上
var selectObject
function circle(Array, clientX, clientY) {
for (let i = 0; i < Array.length; i++) {
const ele = Array[i];
// Math.abs返回絕對值
// Math.sqrt返回一個數的平方根
// Math.pow冪函數運算
var line = Math.abs(Math.sqrt(Math.pow((ele.x - clientX), 2) + Math.pow((ele.y - clientY), 2)))
// 判斷點擊的位置在哪一個圓裏面
if (line - 5 < 0) {
ele.isSelected = true
isDragging = true
selectObject = Array[i]
} else {
ele.isSelected = false
}
}
}
// Canvas點擊事件
// 遍歷所有的座標點
function clickPoint(e) {
// 屏幕事件
var ev = window.event || ev;
// 判斷屏幕，減去屏幕中的偏移量
//offsetLeft會受父級的position屬性影響,同理offsetTop也會
var clientX = ev.clientX - this.offsetLeft;
var clientY = ev.clientY - this.offsetTop;
circle(points.rect1, clientX, clientY)
circle(points.rect2, clientX, clientY)
}
var isDragging = false
function dragCircle(e) {
// 判斷是否可以拖動
if (isDragging == true) {
// 取得畫布上被點擊的點
//offsetLeft會受父級的position屬性影響,同理offsetTop也會
var clickX = e.pageX - canvas.offsetLeft;
var clickY = e.pageY - canvas.offsetTop;
selectObject.x = clickX
selectObject.y = clickY
drawRects()
}
}
// 停止拖動事件
function stopDragging() {
isDragging = false
// 鼠標結束時的座標
console.log(points)
}
</script>
</body>
</html>
