-_-#【Canvas】measureText, translate, drawImage

<!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的更多相关文章

-_-#【Canvas】绘制文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
-_-#【Canvas】FPS
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
-_-#【Canvas】回弹
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
-_-#【Canvas】转成黑白
function drawInBlackAndWhite() { var imagedata = context.getImageData(0, 0, canvas.width, canvas.hei ...
-_-#【Canvas】圆弧运动
var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var angle = 0 f ...
-_-#【Canvas】
context.lineWidth = 0.5 incorrect display lineWidth=1 at html5 canvas canvas.save() canvas.restore() ...
-_-#【Canvas】导出在<canvas>元素上绘制的图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
【canvas】高级功能一变形
[canvas]Demo1 scale缩放 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
【canvas】基础练习三图片
[canvas]Demo1 drawImage drawImage(img,x,y); <!DOCTYPE html> <html lang="en"> & ...

随机推荐

寻找大学目标及行动步骤——记ITAEM团队第二期宣讲会（2014.05.14）
·昨晚8:00-9:40.在钟海楼03029 ,进行了ITAEM团队第二期宣讲会(第一期见第一期宣讲会总结).来參加的主要是大一学生.以信院为主.也有法学院.文学院的同学. 在宣讲会中,大家都比較积 ...
iOS iOS8新特性--UIPopoverPresentationController
1.回顾UIPopoverController的使用,下面这份代码只能在ipad下运行 // 初始化控制器,SecondViewController类继承自UIViewController Secon ...
POJ 1113 Wall 求凸包的两种方法
Wall Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 31199 Accepted: 10521 Descriptio ...
ASP.NET-FineUI开发实践-11
我用实例项目写了个子父页面传值,算是比较灵活的写法,可以把js提取出来写成包,然后调用,我先一步一步写,为有困难的朋友打个样. 先画个页面: 上面是个查询用的表单,底下是表格,内存分页,用到了VBox ...
bootstrap新闻模块样式模板
 <div class="container mp30"> <div class="row&q ...
spring-data-mongodb查询结果返回指定字段
方法1 DBObject dbObject = new BasicDBObject(); dbObject.put("status", 1); DBObject field ...
（转）php中global和$GLOBALS[]的分析之一
PHP 的全局变量和 C 语言有一点点不同,在 C 语言中,全局变量在函数中自动生效,除非被局部变量覆盖这可能引起一些问题,有些人可能漫不经心的改变一个全局变量.PHP 中全局变量在函数中使 ...
iOS开发中的常用宏定义
在iOS开发的过程中合理的使用宏定义能够极大提高编码的速度,下面是一些常用的宏定义,部分内容来自互联网 Log // 调试状态, 打开LOG功能 #ifdef DEBUG #define GLLog( ...
linux术语解析（持续更新）
1.linux内核有个版本,分别是 longterm: 提供长期支持的内核版本 stable: 稳定版本 Beta 测试版
自定义Back返回键（实现按两次返回键退出程序）
实现机制:当用户点击物理返回键时,Activity会调用onBackPressed(),只需在Activity中复写该方法即可以下是代码实现: package com.example.qjm3662 ...

-_-#【Canvas】measureText, translate, drawImage

-_-#【Canvas】measureText, translate, drawImage的更多相关文章

随机推荐

热门专题