<!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的更多相关文章

  1. -_-#【Canvas】绘制文本

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. -_-#【Canvas】FPS

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. -_-#【Canvas】回弹

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. -_-#【Canvas】转成黑白

    function drawInBlackAndWhite() { var imagedata = context.getImageData(0, 0, canvas.width, canvas.hei ...

  5. -_-#【Canvas】圆弧运动

    var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var angle = 0 f ...

  6. -_-#【Canvas】

    context.lineWidth = 0.5 incorrect display lineWidth=1 at html5 canvas canvas.save() canvas.restore() ...

  7. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 【canvas】高级功能一 变形

    [canvas]Demo1 scale缩放 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. 【canvas】基础练习三 图片

    [canvas]Demo1 drawImage drawImage(img,x,y); <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. Android ViewPager FragmentPagerAdapter

    ViewPager  里面放Fragment <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/and ...

  2. HDU 1548 A strange lift 搜索

    A strange lift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  3. 如何在myeclipse8.5中使用maven

    今天搞了一天才搞清楚这个问题,一直导入不了mavendependencies,后来发现是 13-11-23 下午06时47分11秒: Downloading http://mirrors.ibibli ...

  4. Cocos2d-x 3.0 实例学习教程 前沿

    前一段时间学过cocos2d-x  2.x ,后来去做了一些别的项目.近期又想开发自己的游戏了,但是cocos2d-x 已经升级到3.0 ,好多API都变了.所以决定再把cocos2d-x学一遍,一是 ...

  5. [转] Linux TCP/IP网络小课堂：net-tools与iproute2大比较

    PS:netstat选项是-planet,方便记忆 http://os.51cto.com/art/201409/450886.htm 如今许多系统管理员仍结合使用ifconfig.route.arp ...

  6. wp-content-index文章目录插件使用效果调整

    安装好wp-content-index后进行如下设置: 其中标红处必须标红,用于检索锚点.在文章页面添加如下js代码: $(function() { var wpindex = $("#co ...

  7. android中的数据库操作（转）

    android中的数据库操作 android中的应用开发很难避免不去使用数据库,这次就和大家聊聊android中的数据库操作. 一.android内的数据库的基础知识介绍 1.用了什么数据库   an ...

  8. .NET 拼音检索

    微软提供了一个Visual Studio International Pack 组件,可以转换简繁体,或者将汉字转换为拼音以及其他语言的支持. https://www.microsoft.com/zh ...

  9. CSS 让标点符号不出现在行首

    word-break:break-all; 这条语句的作用是让语句到达边界的时候自动换行,但是正是这个样式让标点符号跑到了行首. 语法: word-break : normal | break-all ...

  10. Excel：您尝试打开的文件的格式与文件扩展名指定的格式不一致

    报错信息: 打开文件时提示"您尝试打开的文件xxx.xls的格式与文件扩展名指定的格式不一致.打开文件前请验证文件没有损坏且来源可信.是否立即打开该文件?",卸载Office 20 ...