<!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. MySQL更新时Error Code:1093和Error Code:1175的解决办法

    Error Code: 1093. You can't specify target table 'ws_product' for update in FROM clause 这个是我们在使用upda ...

  2. [Angular 2] @ngrx/devtools demo

    Check the Github: https://github.com/ngrx/devtools Example:

  3. android 自定义progressDialog实现

    我们在项目中经常会遇到这样一个应用场景:执行某个耗时操作时,为了安抚用户等待的烦躁心情我们一般会使用进度条之类的空间,在android中让 大家最容易想到的就是progressbar或者progres ...

  4. PHP Predefined Interfaces 预定义接口(转)

    SPL提供了6个迭代器接口: Traversable 遍历接口(检测一个类是否可以使用 foreach 进行遍历的接口) Iterator 迭代器接口(可在内部迭代自己的外部迭代器或类的接口) Ite ...

  5. CSS控制LI行字符溢出用省略号取代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. java 类型转换：

    数值数据类型: 1.自动类型转换 byte->short ->int->long-->float--->double 范转小的类型向范围大的类型号转换,由系统自动完成   ...

  7. [转] 不要被C++“自动生成”所蒙骗

    http://www.cnblogs.com/fanzhidongyzby/archive/2013/01/12/2858040.html C++对象可以使用两种方式进行创建:构造函数和复制构造函数. ...

  8. Java基础知识强化之IO流笔记06：有return的情况下try catch finally的执行顺序

    1. 给出结论: (1)不管有木有出现异常,finally块中代码都会执行:(2)当try和catch中有return时,finally仍然会执行:(3)finally是在return后面的表达式运算 ...

  9. Linux入门基础教程

    转载自:http://www.centoscn.com/CentOS/2015/0528/5555.html 1. 1      Linux操作系统简介 Linux是一套免费使用和自由传播的类Unix ...

  10. （转）Div左右两侧等高

    一. 利用背景图,做出左右等高的模拟效果   这种方法不是真正的左右等高,而是在外框元素中添加一张背景图片,当内容增多时,背景会纵向重复,就会形成左右等高的效果. 这种方法不是真正的div自动等高,而 ...