Canvas入门(一)

一、Canvas简介

HTML5 Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不像SVG图像那样可以被缩放大小。在网页上使用canvas元素时,他会创建一块矩形的区域。默认情况下该区域宽为300像素,高为150像素,但也可以自定义大小或者设置canvas元素的其他特性。如下我们可以在HTML5页面的最基本的canvas元素。

<canvas></canvas>

在页面中加入了canvas元素后,我们便可以通过JavaScript来自由的控制它。可以在其中添加图片,线条以及文字,也可以在里面绘图,甚至还可以加入高级动画。

使用canvas变成,首相要获取其上下文(context)。接着在上下文中执行动作,最后将这些动作应用到上下稳重。可以将canvas的这种编辑方式想象成为数据库事务:开发人员先发起一个事务,然后执行某些操作,最后提交事务

二、canvas坐标

如上图所示,canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿着垂直方向向下延伸。左上角的坐标为x=0,y=0的点称为原点。

三、浏览器对HTML5 Canvas支持情况:

随着IE9的到来,所有浏览器厂商现在都提供了对HTML5 Canvas的支持,而且它已被大多数用户所掌握。这是Web开发史上一个重要的里程碑,它使得2D绘图在现代网络上蓬勃发展。

尽管旧版本IE占有的市场份额正在逐渐缩小,但在使用Canvas API之前,我们还是应该首先检测浏览器是否支持HTML5 Canvas。

四、检测浏览器支持情况:

在创建canvas元素之前,首先要确保浏览器能够支持他。如果不支持,你就要为那些古董级级浏览器提供一些替代文字。

<script type=”text/javascript”>

window.onload = function(){

try{

document.createElement(“canvas”).getContext(“2d”);

document.getElementById(“support”).innerHTML=”支持Canvas”;

}catch(e){

document.getElementById(“support”).innerHTML=”不支持Canvas”;

}

};

</script>

<h1 id=“support”></h1>

上边的代码尝试在页面中创建一个canvas对象,并获取其上下文。如果发生错误则在页面的h1标签中显示不支持Canvas,否则显示支持Canvas。

 

 

本教程由尚硅谷教育大数据研究院出品,如需转载请注明来源,欢迎大家关注尚硅谷公众号(atguigu)了解更多。

 

 

 


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)