<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="background:gray"></canvas>
<script>
var canvas = document.getElementById(‘canvas‘)
context = canvas.getContext(‘2d‘)
var text = ‘Copyright‘
var FONT_HEIGHT = 100
context.save()
context.font = FONT_HEIGHT + ‘px Arial‘
var textMetrics = context.measureText(text)
context.fillStyle = ‘#0000FF‘
context.textBaseline = ‘middle‘
context.translate(canvas.width / 2, canvas.height / 2)
// translate(x,y) 平移，将画布的坐标原点向左右方向移动x，向上下方向移动y
context.fillRect(30, 30, 50, 50)
context.fillText(text, -textMetrics.width / 2, 0)
context.restore()
context.fillRect(30, 30, 50, 50)
context.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width * 2, canvas.height *2)
</script>
</body>
</html>
时间： 2024-10-09 15:46:47