<!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. 我的搜索优化记录(一)：中文分词优化IK Analyzer

    搜索绝对不仅仅是搭起框架,跑出结果就完成的工作,之后分词.排序等等的优化才是重头戏. 先交代下背景:这个搜索是我一个人负责搭建并优化的项目,主要索引对象为歌曲.歌手MV等等. 使用技术:Lucene. ...

  2. [Falcor] Indroduce to Model

    How to work with JSON data indirectly through a Falcor Model. The Falcor Model allows you to work wi ...

  3. Linux Terminal 控制终端的使用

    1. Open new Terminal:Ctrl + Alt + T 或者 Ctrl + Shift + N 2. Open Tab:Ctrl + Shift + T 3. Close Tab:Ct ...

  4. Android常用功能代码块（转）

    1.设置activity无标题,全屏 // 设置为无标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); // 设置为全屏模式 getWindow(). ...

  5. colorAccent、colorPrimary、colorPrimaryDark actionbar toolbar navigationbar

    伴随着Android5.0的发布也更新了support-v7-appcompat 到V21,其中增加了ToolBar.recyclerview.cardview等控件. Android5.0对改变AP ...

  6. Linux开发工具之gdb（上）

    三.gdb调试(上) 01.gdb:gdb是GNU debugger的缩写,是编程调试工作. 功能:   启动程序,可以按照用户自定义的要求随心所欲的运行程序:   可让被调试的程序在用户所指定的调试 ...

  7. 动态用javascript来修改单选框性别

    <script> window.onload=function(){ if(<{$data.sex}>==0){//<{$data.sex}>是在数据读出来: do ...

  8. 016--JLE JNG(小于等于)

    一.指令格式 条件转移指令 JLE/JNG 格式: JLE/JNG 标号地址 功能: 小于等于/不大于  时转到标号地址 JNG    有符号 不大于         则跳转    //Jump if ...

  9. 运行phpize时出现：Cannot find autoconf. Please check your autoconf installation

    运行/usr/local/webserver/php/bin/phpize时出现:Configuring for:PHP Api Version: 20041225Zend Module Api No ...

  10. [技术翻译]Guava官方文档Ordering

    关于排序 Guava的链式比较器 例子 assertTrue(byLengthOrdering.reverse().isOrdered(list)); 梗概 Ordering是Guava的链式比较器类 ...