-_-#【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"> & ...

随机推荐

VMware于CentOS网络设置
VMware于CentOS网络设置底: 笔记本电脑有两块网卡: 1. 网卡连接公司内网,仅仅配置了内网ip和子网掩码. 2. 无线网卡.连接4g无线路由器.dhcp自己主动配置. 问题: 在VMwa ...
代码讲解Android Scroller、VelocityTracker
在编写自定义滑动控件时常常会用到Android触摸机制和Scroller及VelocityTracker.Android Touch系统简介(二):实例详解onInterceptTouchEvent与 ...
【剑指Offer学习】【面试题43 : n 个锻子的点数】
题目:把n个骰子扔在地上,全部骰子朝上一面的点数之和为s.输入n.打印出s 的全部可能的值出现的概率. 解题思路解法一:基于通归求解,时间效率不够高. 先把n个骰子分为两堆:第一堆仅仅有一个.还有一 ...
Python 时间函数
时间的运用 #coding=utf-8 #!user/bin/python import time import calendar ticks = time.asctime(time.localtim ...
asp.net操作cookie类
using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary ...
【原】AVAudio录制，播放（解决真机播放音量太小）
原文链接:http://www.cnblogs.com/A--G/p/4624526.html 最近学习AVFoundation里的audio操作,最基本的录制和播放,参考了一个Code4pp的一个 ...
Objective-C学习篇03—继承
大纲: 继承的基本概念自定义初始化方法便利构造器方法重写description方法一继承基本概念程序里的对象和"人类"的对象是一样的,高富帅继承了父母,自然就拥有了父母 ...
tableView Crash
转自:http://blog.csdn.net/hamasn/article/details/8613593 Assertion failure in -[UITableView _configure ...
JS中区分参数方法
实现功能:在使用cocosjs制作游戏过程中,很多东西都可以重复使用,例如菜单栏等等.今天尝试写了一个自定义的Js文件用作菜单方便以后使用. 将菜单按钮,以及触发事件作为参数生成一个层直接在游戏中使 ...
Multiple dex files define Lcom/sina/sso/RemoteSSO错误解决办法
在安卓上遇到了Multiple dex files define Lcom/sina/sso/RemoteSSO的编译错误在网上找解决办法搜到了解决办法是这样的方案1:Eclipse->P ...

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

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

随机推荐

热门专题