# 用canvas实现图片信息标注

const myCanvas = document.getElementById("myCanvas")
// 画布
myCanvas.width = 1000
myCanvas.height = 1000
let ctx = myCanvas.getContext('2d')

const xR = myCanvas.height / 2 // 圆点
const yR = myCanvas.height / 2
// 绘画点
function setDian(x, y, r) {
ctx.beginPath()
ctx.arc(x, y, r, 0, 2 * Math.PI)
ctx.fillStyle = 'blue'
ctx.fill()
ctx.stroke();
}
this.setDian(xR , yR , 10) // 圆点


const xY1 = 500, yY1 = 400 // 眼睛1
const xY2 = 400, yY2 = 650 // 眼睛2
const xBZ = 500, yBZ = 550 // 鼻子


function setLine(x, y, x2, y2) {
ctx.strokeStyle = "blue"
ctx.beginPath(); //新建一条path
ctx.moveTo(x, y); //把画笔移动到指定的坐标
ctx.lineTo(x2, y2);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
ctx.closePath();
ctx.stroke(); //绘制路径。
}


<!DOCTYPE html>
<html lang="cms-Hans-CN">

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>标题</title>
<style>
body {
margin: 0;
}

.app {
width: 100vw;
height: 100vh;
}

.img_bg {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.img {
width: 100vw;
height: auto;
}

.canvas_bg {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
</style>

<body>
<div class="app">
<div class="img_bg">
<img src="https://img2.baidu.com/it/u=1925553718,3069984470&fm=26&fmt=auto&gp=0.jpg" class="img">
</div>
<div class="canvas_bg">
<canvas id="myCanvas" class="canvas"></canvas>
</div>
</div>
</body>
<script>
const myCanvas = document.getElementById("myCanvas")
// 画布
myCanvas.width = 1000
myCanvas.height = 1000
let ctx = myCanvas.getContext('2d')

const xR = myCanvas.height / 2 // 圆点
const yR = myCanvas.height / 2

const xY1 = 500, yY1 = 400 // 眼睛1
const xY2 = 400, yY2 = 650 // 眼睛2
const xBZ = 500, yBZ = 550 // 鼻子

// 绘画点
function setDian(x, y, r) {
ctx.beginPath()
ctx.arc(x, y, r, 0, 2 * Math.PI)
ctx.fillStyle = 'blue'
ctx.fill()
ctx.stroke();
}

function setLine(x, y, x2, y2) {
ctx.strokeStyle = "blue"
ctx.beginPath(); //新建一条path
ctx.moveTo(x, y); //把画笔移动到指定的坐标
ctx.lineTo(x2, y2);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
ctx.closePath();
ctx.stroke(); //绘制路径。
}

// 左眼
this.setDian(xY1, yY1, 10) // 小圆点
this.setLine(xY1, yY1, xY1, yY1 - 300) // 竖线
this.setDian(xY1, yY1 - 300, 80) // 大圆点
ctx.fillStyle = '#fff'
ctx.font = "40px Georgia";
ctx.fillText('左眼', xY1 - 40, yY1 - 280) // 字

// 右眼
this.setDian(xY2, yY2, 10) // 小圆点
this.setLine(xY2, yY2, xY2 - 200, yY2) // 横线
this.setLine(xY2 - 200, yY2, xY2 - 200, yY2 - 300) // 竖线
this.setDian(xY2 - 200, yY2 - 300, 80) // 大圆点
ctx.fillStyle = '#fff'
ctx.font = "40px Georgia";
ctx.fillText('右眼', xY2 - 240, yY2 - 280) // 字

this.setDian(xBZ, yBZ, 10) // 小圆点
this.setLine(xBZ, yBZ, xBZ + 200, yBZ) // 横线
this.setLine(xBZ + 200, yBZ, xBZ + 200, yBZ - 300) // 竖线
this.setDian(xBZ + 200, yBZ - 300, 80) // 大圆点
ctx.fillStyle = '#fff'
ctx.font = "40px Georgia";
ctx.fillText('鼻子', xBZ + 160, yBZ - 280) // 字
</script>

</html>


• 1
点赞
• 5
收藏
• 打赏
• 0
评论
02-02 153
12-22 1153
11-07 223
07-12 428
08-14 71
04-07 209
12-30 2725
11-24 2608
09-15 6701

### “相关推荐”对你有帮助么？

• 非常没帮助
• 没帮助
• 一般
• 有帮助
• 非常有帮助

¥2 ¥4 ¥6 ¥10 ¥20

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。