首页 > 代码库 > -_-#【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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。