当前位置： 代码迷 >> 综合 >> 千呼万唤 HTML 5 (9) - 画布（canvas）之承载媒体
  详细解决方案

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

热度：11   发布时间：2024-01-10 14:52:37.0

原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/16/2353563.html

作者：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
[源码下载]


  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.