HTML5技术

【canvas学习笔记一】基本认识 - 池月

字号+ 作者:H5之家 来源:H5之家 2017-07-26 15:02 我要评论( )

canvas标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口)。 属性 canvas只有width和height两个属性。如果没有设置width和height属性,canvas的默认初始大小是

<canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口)。

属性

<canvas>只有width和height两个属性。如果没有设置width和height属性,canvas的默认初始大小是宽300px,高150px。如果通过CSS来设置canvas的宽高,而设置的宽高不是默认大小的比例,则canvas呈现的图象会失真变形。所以,建议用JavaScript来设置canvas的宽高。
如果没有给canvas设置样式,那么canvas将是一块透明的矩形,除非在上面绘制图形。

反馈信息

<canvas>标签很容易定义反馈信息。如果浏览器不支持<canvas>标签,则canvas不会出现,而包含在<canvas></canvas>标签之间的内容则会显现出来。比如:

<canvas> Your browser doesn't support! </canvas>

如果浏览器不支持<canvas>标签的话,则会显示“Your browser doesn't support!”这条信息。 如果浏览器支持<canvas>标签,则这些内容不会显示。

绘图上下文

要在canvas上绘图,要获取canvas的绘图上下文,通过绘图上下文在canvas上绘制图形、图象。 绘制2D图形要获取2D绘图上下文,绘制3D图形要获取3D绘图上下文,这就属于WebGL的内容了。

<canvas id="canvas"> Your browser doesn't support! </canvas> 省略完整代码,下面是JavaScript部分 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d');

用.getContext方法就可以获得2D绘图上下文。如何用ctx绘制图形下一篇再说。

兼容性检测

之前说了<canvas>标签内包含的反馈信息,现在说如何用JavaScript来检测canvas的兼容性。通过检测.getContext方法是否存在来判断。 代码如下:

var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }

 

关于canvas的基础认识就到这啦。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 我的初学html5 canvas - 言语无声

    我的初学html5 canvas - 言语无声

    2017-07-25 11:01

  • HTML5 | Canvas 基本操作 - hugh.dong

    HTML5 | Canvas 基本操作 - hugh.dong

    2017-07-25 09:01

  • canvas一周一练 -- canvas绘制饼图(2) - 张不丢

    canvas一周一练 -- canvas绘制饼图(2) - 张不丢

    2017-07-25 09:00

  • HTML 基础学习笔记 - gdwkong

    HTML 基础学习笔记 - gdwkong

    2017-07-23 09:01

网友点评
e