HTML5权威指南笔记：35-使用canvas元素（1）
1 开始使用canvas 元素
| canvas元素 | |
|---|---|
| 元素类型 | 短语／流 |
| 允许具有的父元素 | 任何能包含短语或流元素的元素 |
| 局部属性 | height 、width |
| 内容 | 短语或流内容 |
| 标签用法 | 开始和结束标签 |
| 是否为HTML5新增 | 是 |
| 在HTML5中的变化 | 此处不适用 |
| 习惯样式 | 无 |
例子：
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: medium double black; margin: 4px}
style>
head>
<body>
<canvas width="500" height="200">
Your browser doesn't support the <code>canvascode> element
canvas>
body>
html>2 获取画布的上下文
为了在canvas元素上绘图，我们需要获得一个上下文对象。
HTMLCanvasElement对象：
| 成员 | 说明 | 返回 |
|---|---|---|
| height | 对应于height属性 | 数值 |
| width | 对应于width属性 | 数值 |
| getContext( |
为画布返回绘图上下文 | 对象 |
例子：为画布获取二维上下文对象
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: medium double black; margin: 4px}
style>
head>
<body>
<canvas id="canvas" width="500" height="100">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
//传递2d表示获取二维上下文对象
var ctx = document.getElementById("canvas").getContext("2d");
//获取后就可以进行绘图
ctx.fillRect(10, 10, 50, 50);
script>
body>
html>
3 绘制矩形
简单的图形方法：
| 成员 | 说明 | 返回 |
|---|---|---|
| clearRect(x, y, w, h) | 清除指定的矩形 | void |
| fillRect(x, y, w, h) | 绘制一个实心矩形 | void |
| strokeRect(x, y, w, h) | 绘制一个空心矩形 | void |
x,y表示从canvas元素左上角算起的偏移量，w和h参数指定了待绘制矩形的宽度和高度。
例子：使用fillRect和strokeRect方法
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black; margin: 4px}
style>
head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
获取2d上下文对象
var ctx = document.getElementById("canvas").getContext("2d");
var offset = 10;
var size = 50;
var count = 5;
for (var i = 0; i < count; i++) {
//绘制实心矩形
ctx.fillRect(i * (offset + size) + offset, offset, size, size);
//绘制空心矩形
ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size,
size, size);
//清空一部分矩形
ctx.clearRect(i * (offset + size) + offset, offset + 5, size, size - 10);
}
script>
body>
html>
4 设置画布绘制状态
基本的绘制状态属性：
| 成员 | 说明 | 默认值 |
|---|---|---|
| fillStyle | 获取或设置用于实心图形的样式 | black |
| lineJoin | 获取或设置线条与图形连接时的样式 | miter |
| lineWidth | 获取或设置线条的宽度 | 1.0 |
| strokeStyle | 获取或设置用于线条的样式 | black |
4.1 设置线条连接样式
三个值：round 、bevel和miter , 默认值是miter 。
例子：
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black; margin: 4px}
style>
head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.strokeRect(20, 20, 100, 100);
ctx.lineJoin = "bevel";
ctx.strokeRect(160, 20, 100, 100);
ctx.lineJoin = "miter";
ctx.strokeRect(300, 20, 100, 100);
script>
body>
html>
4.2 设置填充和笔触样式
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
//可以使用css颜色值来指定一种颜色，名称或颜色模型都可以。
ctx.fillStyle = "black";
ctx.strokeStyle = "rgb(0,0,0)";
script>
4.3 使用渐变
渐变方法：
| 名称 | 说明 | 返回 |
|---|---|---|
| createlinearGradient(xo, yo, x1, y1) | 创建线性渐变 | CanvasGradient |
| createRadialGradient(xo, yo, ro, x1, y1, rl) | 创建径向渐变 | CanvasGradient |
CanvasGradient 的方法：
addColorStop(
4.3.1 使用线性渐变
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black; margin: 4px}
style>
head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
//创建线性渐变，提供的四个值会作为画布上一条线段的开始和结束坐标
var grad = ctx.createLinearGradient(0, 0, 500, 140);
//添加线性渐变属性，0表示开始，1表示终点
grad.addColorStop(0, "red");
grad.addColorStop(0.5, "white");
grad.addColorStop(1, "black");
//定义渐变并添加颜色点之后，就可以用CanvasGradient对象来设置fillStyle或strokeStyle属性
ctx.fillStyle = grad;
//最后，就可以绘制一个图形
ctx.fillRect(0, 0, 500, 140);
script>
body>
html>
4.3.2 使用径向渐变
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black; margin: 4px}
style>
head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
//创建径向渐变，渐变的起点由第一个圆定义，终点则是第二个圆，在两者之间添加颜色点。
//起点圆的圆心坐标（第一个和第二个参数）
//起点圆的半径（第三个参数）
//终点圆的圆心坐标（第四个和第五个参数）
//终点圆的半径（第六个参数）
var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
//添加径向渐变属性，0表示开始，1表示终点
grad.addColorStop(0, "red");
grad.addColorStop(0.5, "white");
grad.addColorStop(1, "black");
//定义渐变并添加颜色点之后，就可以用CanvasGradient对象来设置fillStyle或strokeStyle属性
ctx.fillStyle = grad;
//最后，就可以绘制一个图形
ctx.fillRect(0, 0, 500, 140);
script>
body>
html>
4.5 使用图案
2D绘图上下文定义了对三种图案类型的支持：图像、视频和画布。但是只有图像得以实现。
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black; margin: 4px}
style>
head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvascode> element
canvas>
<img id="banana" hidden src="banana-small.png"/>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
//获取img元素
var imageElem = document.getElementById("banana");
//将获取的img元素作为创建图像的第一个参数。
//第二个参数必须是repeat，repeat-x，repeat-y，no-repeat中的一个
var pattern = ctx.createPattern(imageElem, "repeat");
//最后就可以进行绘制了
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 500, 140);
script>
body>
html>
5 保存和恢复绘制状态
使用下面的方法保存和恢复绘制状态
- save()：保存绘制状态屈性的值，并把它们推入状态栈
- restore()：取出状态栈的第一组值，用它们来设置绘制状态
例子：
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black; margin: 4px}
style>
head>
<body>
<canvas id="canvas" width="500" height="140" preload="auto">
Your browser doesn't support the <code>canvascode> element
canvas>
<div>
<button>Savebutton>
<button>Restorebutton>
div>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var grad = ctx.createLinearGradient(500, 0, 500, 140);
grad.addColorStop(0, "red");
grad.addColorStop(0.5, "white");
grad.addColorStop(1, "black");
var colors = ["black", grad, "red", "green", "yellow", "black", "grey"];
var cIndex = 0;
ctx.fillStyle = colors[cIndex];
draw();
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
switch (e.target.innerHTML) {
//保存当前的绘制状态
case 'Save':
ctx.save();
cIndex = (cIndex + 1) % colors.length;
ctx.fillStyle = colors[cIndex];
draw();
break;
//恢复之前的绘制状态
case 'Restore':
cIndex = Math.max(0, cIndex -1);
ctx.restore();
draw();
break;
}
}
function draw() {
ctx.fillRect(0, 0, 500, 140);
}
script>
body>
html>
6 绘制图像
可以用drawlmage方法在画布上绘制图像
- 这个方法需要三个、五个或九个参数。
- 第一个参数始终是图像的来源，它可以是代表img 、video或其他canvas元素的DOM对象。
- 使用三个参数时，第二个和第三个参数给出了图像应当在画布上绘制的坐标。
- 使用五个参数时，额外的参数指定了应当给图像绘制的宽度和高度，以代替原始尺寸。
- 使用九个参数时：第二个和第三个参数是在源图像内的偏移量；第四个和第五个参数是源图像所需使用区域的宽度和高度；第六个和第七个参数指定了所选区域的左上角将要在画布上绘制的坐标；第八个和第九个参数指定了所选区域将要绘制的宽度和高度。
例子：对视频进行截图
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black}
body > * {float:left;}
style>
head>
<body>
<video id="vid" src="timessquare.webm" controls preload="auto"
width="360" height="240">
Video cannot be displayed
video>
<div>
<button id="pressme">Snapshotbutton>
div>
<canvas id="canvas" width="360" height="240">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var imageElement = document.getElementById("vid");
//获取视频video对象后，点击按钮会对当前侦进行截图，并绘制在canvas中
document.getElementById("pressme").onclick = function(e) {
ctx.drawImage(imageElement, 0, 0, 360, 240);
}
script>
body>
html>
例子：用canvas显示视频并在上面绘图
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black}
body > * {float:left;}
style>
head>
<body>
<video id="vid" hidden src="timessquare.webm" preload="auto"
width="360" height="240" autoplay>video>
<canvas id="canvas" width="360" height="240">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var imageElement = document.getElementById("vid");
var width = 100;
var height = 10;
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
//添加计时器，对图像进行截图，并使用canvas进行绘制
setInterval(function() {
ctx.drawImage(imageElement, 0, 0, 360, 240);
ctx.strokeRect(180 - (width/2),120 - (height/2), width, height);
}, 25);
//添加计时器，改变绘制图像的属性
setInterval(function() {
width = (width + 1) % 200;
height = (height + 3) % 200;
}, 100);
script>
body>
html>
例子：将画布作为drawImage方法的来源
<html>
<head>
<title>Exampletitle>
<style>
canvas {border: thin solid black}
body > * {float:left;}
style>
head>
<body>
<video id="vid" hidden src="timessquare.webm" preload="auto"
width="360" height="240" autoplay>video>
<canvas id="canvas" width="360" height="240">
Your browser doesn't support the <code>canvascode> element
canvas>
<div>
<button id="pressme">Press Mebutton>
div>
<canvas id="canvas2" width="360" height="240">
Your browser doesn't support the <code>canvascode> element
canvas>
<script>
var srcCanvasElement = document.getElementById("canvas");
var ctx = srcCanvasElement.getContext("2d");
var ctx2= document.getElementById("canvas2").getContext("2d");
var imageElement = document.getElementById("vid");
document.getElementById("pressme").onclick = takeSnapshot;
var width = 100;
var height = 10;
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx2.lineWidth = 30;
ctx2.strokeStyle = "black;"
setInterval(function() {
ctx.drawImage(imageElement, 0, 0, 360, 240);
ctx.strokeRect(180 - (width/2),120 - (height/2), width, height);
}, 25);
setInterval(function() {
width = (width + 1) % 200;
height = (height + 3) % 200;
}, 100);
//当按钮被按下时，我把代表原canvas的HTMLCanvasElement对象作为第一个参数，
//用于调用第二个canvas上下文对象上的drawlmage方法
function takeSnapshot() {
ctx2.drawImage(srcCanvasElement, 0, 0, 360, 240);
ctx2.strokeRect(0, 0, 360, 240);
}
script>
body>
html>