这篇文章给大家分享的是有关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网页机关规正和兼容。免费云主机…
免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。