HTML5Canvas标签中怎么使用收录

这篇文章给大家分享的是有关HTML5 Canvas标签中怎么使用收录的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司主营乌恰网站建设的网络公司,主营网站建设方案,成都App制作,乌恰h5小程序设计搭建,乌恰网站营销推广欢迎乌恰等地区企业咨询

一、基本概念

什么是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标签中怎么使用收录”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！