<!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编码和Java编码相应一览表

    MySQL to Java Encoding Name Translations MySQL Character Set Name Java-Style Character Encoding Name ...

  2. Java基础知识强化之集合框架笔记06：Collection集合存储自定义对象并遍历的案例

    1.练习:用集合存储5个学生对象,并把学生对象进行遍历. 分析: (1)创建学生类(2)创建集合对象(3)创建学生对象(4)把学生添加到集合(5)把集合转成数组(6)遍历数组 2. 代码示例: Stu ...

  3. TCO 2015 Round 1B DIV1 500 概率题

    [题意]现在有一些线索,每个线索被发现的概率p[i],如果线索i被知道,那么其他线索也可能会被知道,用vector<string> c给出,c[i][j]='Y'表示知道i这个线索,j这个 ...

  4. 1247 排排站 USACO（查分+hash）

    /* 暴力查分 n*n */ #include<cstdio> #include<cstring> #include<iostream> #define maxn ...

  5. LINQ的基本用法

    1.var q =from c in db.Customers select c.ContactName; 这个语句只是一个声明或者一个描述,并没有真正把数据取出来,只有当你需要该数据的时候,它才会执 ...

  6. css居中技巧

    1    text-align: center; 只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中.在IE6.7中能对任何元素进行水平居中.另外 ...

  7. My.Ioc 代码示例——如何使用默认构造参数，以及如何覆盖默认构造参数

    在 Ioc 世界中,有些框架(例如 Autofac/NInject/Unity)支持传递默认参数,有些框架(例如 SimpleInjector/LightInjector 等)则不支持.作为 My.I ...

  8. SQL UPDATE 经典

    1 sql中用另一个表的一列来更新数据库表 SELECT TOP 1000 [a] ,[b] ,[c] FROM [单元测试项目].[dbo].[A] SELECT TOP 1000 [a] ,[b] ...

  9. Ubuntu下管理员界面的切换

    不同于redhat的Linux系统可以通过命令su root 简单地切换到管理员状态,ubuntn 默认是没有超级用户的,因此如需使用管理员权限可以使用以下2种方法: 1.sudo -i 此命令不需要 ...

  10. 【COGS 56】质数取石子

    [问题描述] DD 和 MM 正在玩取石子游戏.他们的游戏规则是这样的:桌上有若干石子,DD 先取,轮流取,每次必须取质数个.如果某一时刻某一方无法从桌上的石子中取质数个,比如说剩下 0 个或 1 个 ...