<!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. iOS 如何优雅的处理“回调地狱Callback hell”(一) (下)

    了解完流程之后,就可以开始继续研究源码了.在PromiseKit当中,最常用的当属then,thenInBackground,catch,finally - (PMKPromise *(^)(id)) ...

  2. Creating a Navigation Drawer 创建一个导航侧边栏

    The navigation drawer is a panel that displays the app’s main navigation options on the left edge of ...

  3. springmvc学习笔记(理论)

    1.springmvc是什么? Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层 进行职责解耦,基 ...

  4. 生成package.json和bower.json

    1.安装nodejs 2.安装bower工具   cmd:npm bower install 3.生成package.json  cmd:npm init 4.生成bower.json cmd:bow ...

  5. IE8-下背景色半透明滤镜在jquery动画中失效问题记录

    前两天,UIer跟我说,把这些按钮都悬浮在这个图片上!我心中千万头草泥马奔过,图片各种各样.花花绿绿.五颜六色的,这几个按钮也没有多大的光环围绕,用户一眼看上去恐怕会以为这是图片的一部分吧!~~~我假 ...

  6. fastjson反序列化

    package cn.jsonlu.passguard.utils; import com.alibaba.fastjson.JSON; import java.lang.reflect.Type; ...

  7. javascript原型prototype的一个你不一定知道的理解

    原型和原型链的故事 相关文章: 为什么原型继承很重要 先来看看一段小代码用以引入要讲的小故事. function Foo() {}; var f1 = new Foo(); Foo.prototype ...

  8. 自定义android精美聊天界面

    编写精美聊天界面,那就肯定要有收到的消息和发送的消息. 首先还是编写主界面,修改activity_chat.xml中的代码,如下所示: <?xml version="1.0" ...

  9. 7——使用TextView实现跑马灯

    首先给TextView添加一个单行限制: android:singleLine="true" - 解决方案一 更改TextView的一个属性: android:ellipsize= ...

  10. [javascript]js修改title

    使用javascript修改title 1.这个在chrome中可以成功,在ie8中报错 <!DOCTYPE html> <html> <head> <tit ...