<!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>
-_-#【Canvas】measureText, translate, drawImage
原文：http://www.cnblogs.com/jzm17173/p/4184889.html