<!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. [Angular 2] ng-class and Encapsulated Component Styles

    import {Input, Component, View, NgClass} from "angular2/angular2"; @Component({ selector: ...

  2. Verilog之event的用法

    编写verilog的testbench时,可使用event变量触发事件. event变量声明为: event var; event触发为: ->var; 捕获触发为: @(var); 在mode ...

  3. 转载：C#实现接口回调

    通常情况下,我们创建一个对象,并马上直接去使用它的方法.然而,在有些情况下,希望能在某个场景出现后或条件满足时才调用此对象的方法.回调就可以解决这个“延迟调用对象方法”的问题.这个被调用方法的对象称为 ...

  4. 【开源java游戏框架libgdx专题】-02-Eclipse Gradle 环境安装

    创建eclipse开发环境 Eclipse 4.5 Help -> install newsoftware 填上下载地址(Eclipse 4.5及以上版本): http://dist.sprin ...

  5. Windows Azure上的Odoo(OpenERP)-2.在Ubuntu虚拟机上部署Odoo(OpenERP)

    创建虚拟机的步骤在这里就不再赘述了,请参考上一篇博文. 首先用下述命令将Ubuntu系统进行更新: 1. sudo apt-get update 2. sudo apt-get upgrade 3. ...

  6. 用js生成二维码

    <!doctype html> <html> <meta charset="utf-8"/> <head> <script s ...

  7. Angular JS API

    ng function angular.bind angular.bootstrap angular.copy angular.element angular.equals angular.exten ...

  8. ASP.NET几种清除页面缓存的方法

    在asp.net中使用模式dialog时,你会发现每次打开的页面都是相同的内容,页面内容并没有刷新,这是缓存的原因造成的, 解决方法如下: 第一种是ASP.NET清除页面缓存 Response.Buf ...

  9. JFrome 登陆/注册/回显无数据库连接小程序

    当离开RCP插件区重新回顾一下JFrame窗口程序的标签.页面间的跳转. 完成一个登陆.注册界面.(界面完成后练习输入输出流,将前台的注册信息保存到一个文件夹下的.txt文件中) 首先向通过JFram ...

  10. JFrome 登陆/注册/回显/输出流小程序之二