首页 > 代码库 > -_-#【Canvas】measureText, translate, drawImage

-_-#【Canvas】measureText, translate, drawImage

技术分享

<!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