html5 canvas 画图教程案例分析


Posted in HTML / CSS onNovember 23, 2012

虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的。所以,如果你想学习Canvas画图,你必须要有Javascript基础。
另外,画图嘛,总有一些图像方面的术语和知识点,所以如果你有过做图或美工经验,学习Canvas会更容易。
Canvas,意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以,把他看成一块实实在在的画布可以加快理解。

画布
用canvas作画,首先,你需要有一块“画布”。如果你的书架里面没有画布,你可以买一卷回来放进去。当然,在网页里面我们不需要花钱买,直接写一个canvas即可,类似:

复制代码
代码如下:

<canvas id="cvs" width="800" height="600">你的浏览器不支持canvas</canvas>

其中标签里面的文字是给不支持canvas的浏览器看的,支持的永远看不到。

注意:这个画布的特性有必要说一下,他和IMG一样,有两个原生的属性,即width和height.同时,因为他也是一个html元素,所以他也可以使用css来定义width和height,但是,千万要注意:他自身的宽高和通过css定义的宽高是不一样的!
我们用JS来改变Canvas的原生宽高,是这样的:

复制代码
代码如下:

canvas.width= 400
canvas.height = 300

但用JS通过操作CSS来改变Canvas的宽高,则是这样:
复制代码
代码如下:

canvas.style.width = '400px'
canvas.style.height = '300px'

看得出来,语法上区别是很明显的。实际上区别更明显。
他们的区别是什么?
比如一块宽1000的画布,你在画布左侧画了一条竖线,宽100像素。此时你把画布自身的width设为500,相当于把画布的右半边咔嚓掉了,但此时那竖线的宽度还是100。
但如果你通过CSS来把画布的宽度变成500,那就相当于把画布由1000挤压到500,所以竖线的宽度变成了50.
(这只是理论情况,实际上设置canvas的原生宽度时,他会清空掉已画出来的内容。。)
Canvas自身的宽高就是画布本身的属性,而css给他的宽高则可以看作是缩放,如果你缩放的太过随意,那么画布上的图形可能变得你自己都认不出来。
所以有个建议:除非特殊情况,一定不要用css来定义Canvas的宽高。
画布有了,现在我们把他拿出来:
复制代码
代码如下:

var cvs = document.getElementById('cvs');

看,跟获取其他元素的办法一模一样。

画笔
现在画布已经有了,想往上面涂鸦,当然还需要一只笔。canvas取得笔的方法如下:

复制代码
代码如下:

var ctx = cvs.getContext('2d');

其中getContext方法就是用来拿笔的,但这里还有个参数:2d,这是什么意思呢?这个可以看作是画笔的种类。
既然有2D,那么就会有3d了?以后估计会有,但现在没有。所以我们先用这只2d的笔吧。
!那么我们可以多放几只笔来备用吗?答案是不能。
我要问一个问题:你画图的时候是同时用几只笔呢?相信99.9%的人都是只能用一只,虽然有些武林高手比如小龙女之类的可以两只手同时画,但这对一般人来说很不现实,是不是?
所以现在你可以感到欣慰了,因为html5的canvas标签也只支持同时用一支笔!
有的写JS写的比较熟的同学可能会想耍个小聪明:我用前面获取画笔的方法多整几只笔出来,不就行了?!

比如

复制代码
代码如下:

var con = cvs.getContext('2d');
var ctx = cvs.getContext('2d');

哈哈哈哈,好像成功了,在没测试之前我也是这么想的,但,其实这只是一个幻觉!
因为我发现,我把其中一支笔蘸上红墨水,另外一支笔也自动蘸上了红墨水!因为两支笔是一体的!fuck。
如果你需要画出不同的颜色,办法就是把这只唯一的“笔”不停的蘸上新颜色。
这其实不是一个优点,是个缺陷,以后你会体会到的。

坐标
2d世界,就是平面,在一个平面上确定一个点,需要两个值,x坐标和y坐标。这是一个很重要的基础概念,不过由于大家都学过数学我也就不多讲了。
canvas的原点是左上角,跟flash一样。但蛋疼的是数学中的原点是左下角。这个…只能说习惯就好

其他
canvas有一个和现实的画布不一样的特点就是,他默认是透明的,没有背景色。这在大部分时候非常重要。

HTML / CSS 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 #HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 #HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 #HTML / CSS
Bootstrap 学习分享
Nov 12 #HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 #HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 #HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 #HTML / CSS
You might like
zend framework配置操作数据库实例分析
2012/12/06 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python装饰器模式定义与用法分析
2018/08/06 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Python调用JavaScript代码的方法
2020/10/27 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
什么是属性访问器
2015/10/26 面试题
学习2014年全国两会心得体会
2014/03/12 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
天猫活动策划方案
2014/08/21 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
幸福终点站观后感
2015/06/04 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
python3操作redis实现List列表实例
2021/08/04 Python