文字渲染基础
context.font(要写的文字样式)
context.fillText(string,x,y) (填充)
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 800
canvas.height = 800
var context = canvas.getContext('2d')
context.save() //保存
context.font = 'bold 40px Arial'
context.fillText('今天', 100, 100)
context.strokeText('明天', 200, 200)
context.restore()
}文字的字体 样式
- context.font
context.font = font-style font-variant font-weight font-size font-family
font-style: normal(Default) italic(斜体字) oblique(倾斜斜体字)
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 800
canvas.height = 800
var context = canvas.getContext('2d')
context.save() //保存
context.font = 'italic bold 40px Arial'
context.fillText('今天', 100, 100)
context.strokeText('明天', 200, 200)
context.restore()
}
文本对齐
- context.textAlign (水平对齐)
left,center,right 文字对齐的方式
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 800
canvas.height = 800
var context = canvas.getContext('2d')
context.save() //保存
context.font = 'italic bold 40px Arial'
context.textAlign = 'left'
context.fillText('今天', 100, 100)
context.restore()
}- context.textBaseline(垂直对齐)
top middle bottom
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 800
canvas.height = 800
var context = canvas.getContext('2d')
context.save() //保存
context.font = 'italic bold 40px Arial'
context.textBaseline = 'middle'
context.fillText('今天', 100, 100)
context.restore()
}每个文字的宽度
- context.measureText(string).width
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 800
canvas.height = 800
var context = canvas.getContext('2d')
context.save() //保存
context.font = 'italic bold 40px Arial'
context.textBaseline = 'middle'
context.fillText('今天', 100, 100)
var textWidth = context.measureText('今天努力啊').width
context.fillText('以上的宽度是' + textWidth + 'px', 40, 200)
context.restore()
}用 Canvas 写的刮刮乐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用Canvas画一个刮刮乐</title>
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<style>
.content,
.cover {
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px;
}
.content {
font-size: 48px;
line-height: 200px;
text-align: center;
color: red;
}
h3 {
text-align: center;
line-height: 200px;
color: deepskyblue;
}
</style>
</head>
<body>
<h3>刮刮乐</h3>
<div class="content">蚂蚁会员vip</div>
<!-- 创建一个画布（Canvas）-->
<canvas id="cover" class="cover" width="400" height="400"></canvas>
</body>
<script>
/*使用 JavaScript 来绘制图像*/
var isdown = false,
cover = document.getElementById('cover'), //首先，找到 <canvas> 元素:
covercanvas = cover.getContext('2d') //然后，创建 context 对象：
//下面的两行代码绘制一个灰色的矩形：
//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
covercanvas.fillStyle = 'transparent'
covercanvas.fillRect(0, 0, 400, 200)
//canvas 是一个二维网格。
//canvas 的左上角坐标为 (0,0)
//上面的 fillRect 方法拥有参数 (0,0,400,200)。
//意思是：在画布上绘制 400x200 的矩形，从左上角开始 (0,0)。
function fillter(canvas) {
canvas.fillStyle = '#ccc'
canvas.fillRect(0, 0, 400, 200)
}
function isDown(e) {
e.preventDefault()
isdown = true
}
function isUp(e) {
isdown = false
}
function draw(e) {
e.preventDefault()
if (isdown) {
if (e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1]
}
var _height = parseInt((window.innerHeight - 400) / 2),
_width = parseInt((window.innerWidth - 400) / 2),
touchTop = e.clientY - _height,
touchLeft = e.clientX - _width
with (covercanvas) {
beginPath()
arc(touchLeft, touchTop, 10, 0, Math.PI * 2)
fill()
}
}
}
fillter(covercanvas)
covercanvas.globalCompositeOperation = 'destination-out'
cover.addEventListener('touchstart', isDown)
cover.addEventListener('touchmove', draw)
cover.addEventListener('touchend', isUp)
cover.addEventListener('mousemove', draw)
cover.addEventListener('mousedown', isDown)
cover.addEventListener('mouseup', isUp)
</script>
</html>
