【canvas学习笔记一】基本认识
2017-07-25 18:25
295 查看
<canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口)。
如果没有给canvas设置样式,那么canvas将是一块透明的矩形,除非在上面绘制图形。
如果浏览器不支持<canvas>标签的话,则会显示“Your browser doesn't support!”这条信息。 如果浏览器支持<canvas>标签,则这些内容不会显示。
用.getContext方法就可以获得2D绘图上下文。如何用ctx绘制图形下一篇再说。
关于canvas的基础认识就到这啦。
属性
<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的基础认识就到这啦。
相关文章推荐
- Canvas 基本用法学习笔记
- 小韵游戏开发学习笔记——第四期:认识Unity基本组件(一)
- canvas学习笔记(一)-认识canvas
- Cocos2d-x学习笔记(二)——Cocos2d的基本框架认识
- html和CSS学习笔记(3):认识基本标签
- 小韵游戏开发学习笔记——第五期:认识Unity基本组件(二)
- 【JS】js学习笔记之canvas基本绘图
- [HEVC学习笔记]视频压缩的基本认识
- Silverlight 2学习笔记二:三个基本布局控件(Canvas、StackPanel、Grid )
- 测试理论学习笔记一:测试的基本认识
- Silverlight 2学习笔记二:三个基本布局控件(Canvas、StackPanel、Grid )
- 【Lucene学习笔记】基本使用和认识
- Druid学习笔记(1)Druid介绍与基本概念
- 【canvas学习笔记七】混合和裁剪
- Hibernate 学习笔记-1-3(Hibernate的基本映射以及几种主键生成策略的测试)
- 【JSP学习笔记】1:基本标签式语法分类
- iOS学习笔记-027.UITableViewCell的基本用法
- [TensorFlow学习笔记1]TensorFLow的基本概念和基本使用
- c语言程序的基本结构(学习笔记1)
- IOS学习笔记(七)之UISegmentedControl分段控件的基本概念和使用方法