HTML5 Canvas标签中怎么使用收录

这篇文章给大家分享的是有关HTML5 Canvas标签中怎么使用收录的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
　　一、基本概念
　　什么是Canvas
　　?是一个新的?HTML?元素，这个元素在?HTML5 ?中被定义。这个元素通常可以被用来在?HTML?页面中通过?JavaScript?进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前?HTML5?规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分?HTML5?规范。目前支持?canvas?元素的浏览器有?Firefox?3+、Safari?4、Chrome?2.0+?等，因此，在运行本页中的例子时，请确保你使用的是上述浏览器之一。
　　尽管在?Mozilla ?已经有不少关于?Canvas?的教程，我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白，那么你可以在参考资料中找到?Mozilla?网站上?Canvas?教程的链接。
　　另外，可以在这里找到一些有趣的?Canvas?示例
　　开始使用?Canvas
　　使用?Canvas?很简单，与使用其他?HTML?元素一样，只需要在页面中添加一个标签即可：
　　代码如下:
　　当然，这样只是简单的创建了一个?Canvas?对象而已，并没有对它进行任何操作，这个时候的?canvas?元素看上去与?div?元素是没什么区别的，在页面上什么都看不出来：)
　　另外，canvas?元素的大小可以通过?width?与?height?属性来指定，这与?img?元素有点相似。
　　Canvas?的核心：Context前面说到可以通过?JavaScript?来操作?Canvas?对象来进行绘制图形、合成图像等操作，这些操作并不是通过?Canvas?对象本身来进行的，而是通过?Canvas?对象的一个方法?getContext?获取?Canvas?操作上下文来进行。也就是说，在后面我们使用?Canvas?对象的过程中，都是与?Canvas?对象的?Context?打交道，而?Canvas?对象本身可以用来获取?Canvas?对象的大小等信息。
　　要获取?Canvas?对象的?Context?很简单，直接调用?canvas?元素的?getContext?方法即可，在调用的时候需要传递一个?Context?类型参数，目前可以用的并且是唯一可以用的类型值就是?2d：
　　var canvas = document.getElementById(“screen”);
　　var ctx = canvas.getContext(“2d”);
　　Firefox?3.0.x?的尴尬
　　Firefox?3.0.x?虽然支持了?canvas?元素，但是并没有完全按照规范来实现，规范中的?fillText、 measureText?两个方法在?Firefox?3.0.x?中被几个?Firefox?特有的方法代替，因此在?Firefox?3.0.x?中使用?Canvas?时需要先?fix?这个几个方法在不同浏览器中的差别。
　　下面这代码取自?Mozilla?Bespin ?项目，它修正了?Firefox?3.0.x?中?Canvas?的?Context?对象与?HTML5?规范不一致的地方：
　　function fixContext(ctx) {
　　// * upgrade Firefox 3.0.x text rendering to HTML 5 standard
　　if (!ctx.fillText && ctx.mozDrawText) {
　　ctx.fillText = function(textToDraw, x, y, maxWidth) {
　　ctx.translate(x, y);
　　ctx.mozTextStyle = ctx.font;
　　ctx.mozDrawText(textToDraw);
　　ctx.translate(-x, -y);
　　};
　　}
　　// * Setup measureText
　　if (!ctx.measureText && ctx.mozMeasureText) {
　　ctx.measureText = function(text) {
　　if (ctx.font) ctx.mozTextStyle = ctx.font;
　　var width = ctx.mozMeasureText(text);
　　return { width: width };
　　};
　　}
　　// * Setup html5MeasureText
　　if (ctx.measureText && !ctx.html5MeasureText) {
　　ctx.html5MeasureText = ctx.measureText;
　　ctx.measureText = function(text) {
　　var textMetrics = ctx.html5MeasureText(text);
　　// fake it ’til you make it
　　textMetrics.ascent = ctx.html5MeasureText(“m”).width;
　　return textMetrics;
　　};
　　}
　　// * for other browsers, no-op away
　　if (!ctx.fillText) {
　　ctx.fillText = function() {};
　　}
　　if (!ctx.measureText) 免费云主机域名{
　　ctx.measureText = function() { return 10; };
　　}
　　return ctx;
　　}
　　注意：到?Opera?9.5?为止，Opera?还不支持?HTML5?规范中?Canvas?对象的?fillText?以及其相关方法和属性。
　　Hello,?Canvas!
　　在对?Canvas?进行了一些初步了解后，开始来写我们的第一个?Canvas?程序，闻名的?HelloWorld?的又一个分支“Hello,?Canvas”：
　　(function() {
　　var canvas = document.getElementById(“screen”);
　　var ctx = fixContext(canvas.getContext(“2d”));
　　ctx.font = “20pt Arial”;
　　ctx.fillText(“Hello, Canvas!”, 20, 20);
　　ctx.fillText(“”, 20, 50);
　　function fixContext(ctx) {
　　// * upgrade Firefox 3.0.x text rendering to HTML 5 standard
　　if (!ctx.fillText && ctx.mozDrawText) {
　　ctx.fillText = function(textToDraw, x, y, maxWidth) {
　　ctx.translate(x, y);
　　ctx.mozTextStyle = ctx.font;
　　ctx.mozDrawText(textToDraw);
　　ctx.translate(-x, -y);
　　};
　　}
　　// * Setup measureText
　　if (!ctx.measureText && ctx.mozMeasureText) {
　　ctx.measureText = function(text) {
　　if (ctx.font) ctx.mozTextStyle = ctx.font;
　　var width = ctx.mozMeasureText(text);
　　return { width: width };
　　};
　　}
　　// * Setup html5MeasureText
　　if (ctx.measureText && !ctx.html5MeasureText) {
　　ctx.html5MeasureText = ctx.measureText;
　　ctx.measureText = function(text) {
　　var textMetrics = ctx.html5MeasureText(text);
　　// fake it ’til you make it
　　textMetrics.ascent = ctx.html5MeasureText(“m”).width;
　　return textMetrics;
　　};
　　}
　　// * for other browsers, no-op away
　　if (!ctx.fillText) {
　　ctx.fillText = function() {};
　　}
　　if (!ctx.measureText) {
　　ctx.measureText = function() { return 10; };
　　}
　　return ctx;
　　}
　　})();
　　运行示例，Canvas?对象所在区域显示出“Hello,?World!”，这正是代码中?ctx.fillText(“Hello,?World!”,?20,?20);?的作用。
　　fillText?以及相关属性
　　fillText?方法用来在?Canvas?中显示文字，它可以接受四个参数，其中最后一个是可选的：
　　void?fillText(in?DOMString?text,?in?float?x,?in?float?y,?[Optional]?in?float?maxWidth);
　　其中?maxWidth?表示显示文字时最大的宽度，可以防止文字溢出，不过我在测试中发现在?Firefox?与?Chomre?中指定了?maxWidth?时也没有任何效果。
　　在使用?fillText?方法之前，可以通过设置?Context?的?font?属性来调整显示文字的字体，在上面的示例中我使用了“20pt?Arial”来作为显示文字的字体，你可以自己设置不同的值来看具体的效果。感谢各位的阅读！关于“HTML5 Canvas标签中怎么使用收录”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

相关推荐: CSS网页布局错位的方法

这篇文章主要介绍了CSS网页布局错位的方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS网页布局错位的方法文章都会有所收获，下面我们一起来看看吧。为何总计宽度较量争论网页像素宽度是为了CSS网页机关规正和兼容。免费云主机…