GitHub 博客园 Nanakon

-_-#【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>

 

posted on 2014-12-25 16:07  jzm17173  阅读(315)  评论(0)    收藏  举报

导航

轻音