HTML 5深入浅出教学篇之九
作者:licqi 时间:2012-05-31阅读数:人阅读
介绍
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>[源码下载] 原文链接:http://www.cnblogs.com/webabcd/archive/2012/02/16/2353563.html
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com
上一篇:HTML 5深入浅出教学篇之八
下一篇:HTML 5深入浅出教学篇之十