博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

千呼万唤 HTML 5 (9) - 画布(canvas)之承载媒体

Posted on 2012-02-16 09:22  webabcd  阅读(3442)  评论(7编辑  收藏

[索引页]
[源码下载] 


千呼万唤 HTML 5 (9) - 画布(canvas)之承载媒体



作者:webabcd



介绍
HTML 5: 画布(canvas)之承载媒体

  • 呈现文本 - font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText, TextMetrics.width
  • 呈现图片 - drawImage()
  • 呈现视频截图 - drawImage()
  • 呈现其他画布 - drawImage()



示例
1、呈现文本 | font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText, TextMetrics.width
canvas/media/text.html

<!DOCTYPE HTML>
<html>
<head>
<title>在 canvas 上呈现文本的 demo</title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
</canvas>
<br />
<button type="button" onclick="drawIt();">在画布上呈现一些文本</button>
<button type="button" onclick="clearIt();">清除画布</button>

<script type="text/javascript">

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function drawIt() {

clearIt();

ctx.beginPath();
ctx.moveTo(
0, canvas.height / 2);
ctx.lineTo(canvas.width, canvas.height
/ 2);
ctx.moveTo(canvas.width
/ 2, 0);
ctx.lineTo(canvas.width
/ 2, canvas.height);
ctx.stroke();


/*
* context.font - 语法与 CSS 中的 font 属性相同,默认值为 10px sans-serif
*
* context.textAlign - 可能的值为:start, end, left, right, center;默认值为:start
*
* context.textBaseline - 可能的值为:top, hanging, middle, alphabetic, ideographic, bottom;默认值为:alphabetic
*/

ctx.font
= 'italic 24px 宋体';
ctx.fillStyle
= "blue";

ctx.textBaseline
= "top";
// 不同 textAlign 的效果
ctx.textAlign = "start";
ctx.fillText(
"Horizontal", canvas.width / 2, 0);
ctx.textAlign
= "end";
ctx.fillText(
"Horizontal", canvas.width / 2, 30);
ctx.textAlign
= "left";
ctx.fillText(
"Horizontal", canvas.width / 2, 60);
ctx.textAlign
= "right";
ctx.fillText(
"Horizontal", canvas.width / 2, 90);
ctx.textAlign
= "center";
ctx.fillText(
"Horizontal", canvas.width / 2, 120);


ctx.textAlign
= "start";
// 不同 textBaseline 的效果
ctx.textBaseline = "top";
ctx.fillText(
"Vertical", 0, canvas.height / 2);
ctx.textBaseline
= "hanging";
ctx.fillText(
"Vertical", 100, canvas.height / 2);
ctx.textBaseline
= "middle";
ctx.fillText(
"Vertical", 200, canvas.height / 2);
ctx.textBaseline
= "alphabetic";
ctx.fillText(
"Vertical", 300, canvas.height / 2);
ctx.textBaseline
= "ideographic";
ctx.fillText(
"Vertical", 400, canvas.height / 2);
ctx.textBaseline
= "bottom";
ctx.fillText(
"Vertical", 500, canvas.height / 2);


/*
* context.strokeStyle - 调用 strokeText() 时字体的笔划颜色
*
* context.fillStyle - 调用 fillText() 时字体的填充颜色
*
* context.fillText(text, x, y [, maxWidth]) - 以填充的方式绘制文本内容
* text - 需要呈现的文本字符串
* x, y - 参考点坐标,textAlign 和 textBaseline 均会以此点为参考点
* maxWidth - 显示区域的最大长度,必要时会强制压缩文本的长度。可选参数
*
* context.strokeText(text, x, y [, maxWidth]) - 以笔划的方式绘制文本内容。参数说明同 fillText()
*/
ctx.font
= '64px 宋体';
ctx.strokeStyle
= 'blue';
ctx.strokeText(
"strokeText", 0, 400);
ctx.strokeText(
"strokeText", 0, 500, 100);


/*
* context.measureText(text) - 返回指定文本内容在当前上下文环境中的度量对象,即 TextMetrics 类型的对象
* TextMetrics.width - TextMetrics 对象有一个名为 width 的只读属性,用于获取 TextMetrics 对象的长度值
*/
var metrics = ctx.measureText("strokeText");
alert(metrics.width);
}

function clearIt() {
ctx.clearRect(
0, 0, 600, 600);

ctx.textAlign
= "start";
ctx.textBaseline
= "alphabetic";
}

</script>
</body>
</html>


2、呈现图片 | drawImage()
canvas/media/image.html

<!DOCTYPE HTML>
<html>
<head>
<title>在 canvas 上呈现图片的 demo</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
</canvas>
<br />
<button type="button" onclick="drawIt();">在画布上呈现图片</button>
<button type="button" onclick="clearIt();">清除画布</button>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function drawIt() {

clearIt();

var img = new Image();

img.onload
= function () {

/*
* context.drawImage() 的可绘制对象包括:HTMLImageElement, HTMLVideoElement, HTMLCanvasElement
*
* context.drawImage(image, x, y) - 绘制图像
* image - 图像对象,可以来自 img 标签
* x - 图像绘制到画布后的左上角的 x 坐标
* y - 图像绘制到画布后的左上角的 y 坐标
*
* context.drawImage(image, x, y, width, height) - 绘制图像
* image - 图像对象,可以来自 img 标签
* x - 图像绘制到画布后的左上角的 x 坐标
* y - 图像绘制到画布后的左上角的 y 坐标
* width - 图像绘制到画布后的宽
* height - 图像绘制到画布后的高
*
* context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) - 绘制图像
* image - 图像对象,可以来自 img 标签
* sourceX - 截取源图像,相对于源图像的左上角的 x 坐标,
* sourceY - 截取源图像,相对于源图像的左上角的 y 坐标,
* sourceWidth - 截取源图像,需要截取的宽
* sourceHeight - 截取源图像,需要截取的高
* destX - 图像绘制到画布后的左上角的 x 坐标
* destY - 图像绘制到画布后的左上角的 y 坐标
* destWidth - 图像绘制到画布后的宽
* destHeight - 图像绘制到画布后的高
*
*/

ctx.drawImage(img,
0, 0); // 按图像原始大小显示到画布上
ctx.drawImage(img, 0, 0, 200, 200); // 显示图像到画布上,并指定其宽高
ctx.drawImage(img, 50, 0, 400, 100, 0, 300, 200, 50); // 截取源图像的一部分显示到画布上,并指定被截取部分显示时的宽和高
}

img.src
= "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
// img.src = "http://www.cnblogs.com/assets/html5_logo.png";
}

function clearIt() {
ctx.clearRect(
0, 0, 800, 600);
}

</script>
</body>
</html>


3、呈现视频截图 | drawImage()
canvas/media/video.html

<!DOCTYPE HTML>
<html>
<head>
<title>在 canvas 上呈现视频截图的 demo</title>
</head>
<body>

<video id="video" width="400" height="240" src="http://ie.microsoft.com/testdrive/Graphics/VideoFormatSupport/big_buck_bunny_trailer_480p_high.mp4" controls preload="metadata">
您的浏览器不支持 video 标签
</video>

<br />

<canvas id="canvas" width="400" height="240" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
</canvas>
<br />
<button type="button" onclick="drawIt();">在画布上呈现视频截图</button>
<button type="button" onclick="clearIt();">清除画布</button>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');
var video = document.getElementById('video');
var timerId = -1;

function drawIt() {

clearIt();

timerId
= setInterval(drawVideo, 300);

function drawVideo() {
if (!isNaN(video.duration)) {

/*
* context.drawImage() 的可绘制对象包括:HTMLImageElement, HTMLVideoElement, HTMLCanvasElement
*
* 呈现 video 对象的当前截图,其他参数说明详见 image.html
*/
ctx.drawImage(video,
0, 0, 400, 240);
}
}
}

function clearIt() {
ctx.clearRect(
0, 0, 400, 240);

clearInterval(timerId);
}

</script>
</body>
</html>


4、呈现其他画布 | drawImage()
canvas/media/canvas.html

<!DOCTYPE HTML>
<html>
<head>
<title>在 canvas 上呈现其他 canvas 的 demo</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
</canvas>
<br />

<canvas id="canvas2" width="300" height="300" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
</canvas>
<br />

<button type="button" onclick="drawIt();">在画布上呈现其他画布</button>
<button type="button" onclick="clearIt();">清除画布</button>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');
var ctx2 = document.getElementById('canvas2').getContext('2d');

function drawIt() {

clearIt();

var img = new Image();

img.onload
= function () {
ctx.drawImage(img,
0, 0, 300, 300);

/*
* context.drawImage() 的可绘制对象包括:HTMLImageElement, HTMLVideoElement, HTMLCanvasElement
*
* 呈现指定的 canvas 的当前图像,其他参数说明详见 image.html
*/
ctx2.drawImage(document.getElementById(
'canvas'), 0, 0);
}

img.src
= "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
// img.src = "http://www.cnblogs.com/assets/html5_logo.png";
}

function clearIt() {
ctx.clearRect(
0, 0, 300, 300);
ctx2.clearRect(
0, 0, 300, 300);
}

</script>
</body>
</html>



OK
[源码下载]