<!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. JAVA大数类

    JAVA大数类api http://man.ddvip.com/program/java_api_zh/java/math/BigInteger.html#method_summary 不仅仅只能查J ...

  2. select菜单实现二级联动

    <tr> <th>执行人<b>*</b></th> <td> <select name="jdcld.ZXDW& ...

  3. php session_set_save_handler 函数的用法(mysql)(转)

    <?php /*============================文件说明======================================== @filename:     s ...

  4. cocos2d-x 背景音乐播放

    Code // on "init" you need to initialize your instance bool HelloWorld::init() {      bool ...

  5. [转] 使用CodeViz生成C/C++函数调用关系图

    运行环境:虚拟机下的Ubuntu 11.04 结合Graphviz工具,使用CodeViz可以生成直观和漂亮的C/C++程序函数之间的调用关系图. 1.安装graphviz 在安装CodeViz之前, ...

  6. 体验Impress.js

    用腻了ppt,prezi的风格看起来更酷一点儿,无意中得知有Impress.js这么一个H5版的prezi,nice,值得一试. 关于Impress.js,网上教程很多,但说实话就跟教小朋友一样,一步 ...

  7. ubuntu 修改运行级别

    只转载了成功的, 具体参见原文  http://www.2cto.com/os/201308/237632.html 第一种方法:(内核级别的)   Sudo vi /etc/default/grub ...

  8. Android客户端与服务端交互之登陆示例

    Android客户端与服务端交互之登陆示例 今天了解了一下android客户端与服务端是怎样交互的,发现其实跟web有点类似吧,然后网上找了大神的登陆示例,是基于IntentService的 1.后台 ...

  9. 地址栏访问Action，后来方法执行两次

    SSH框架,在地址栏输入URL访问Action,后台访问会访问两次.很奇怪. 经排查,最终问题在于方法名称写错了.将getOpinionByPN()修改成queryOpinionByPN(),没有问题 ...

  10. jquery的ajax方法：ajaxStart()和ajaxStop()

    ajaxStart()方法: 当AJAX请求开始时,显示加载中的提示. $("#divMessage").ajaxStart(function(){ $(this).show(); ...