html5 Canvas画图教程(1)—画图的基本常识


Posted in HTML / CSS onJanuary 09, 2013

虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的。所以,如果你想学习Canvas画图,你必须要有Javascript基础。
另外,画图嘛,总有一些图像方面的术语和知识点,所以如果你有过做图或美工经验,学习Canvas会更容易。

Canvas,意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以,把他看成一块实实在在的画布可以加快理解。

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

复制代码
代码如下:

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

其中标签里面的文字是给不支持canvas的浏览器看的,支持的永远看不到。
这个画布的特性有必要说一下,他有两个原生的属性,即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一样。但蛋疼的是数学中的原点是左下角。这个…只能说习惯就好

一些画图的基本常识
首先你需要知道,怎样的坐标变化会画出什么线?比如,x坐标变大而y坐标不变,则能画出一条横线;y坐标变化而x坐标不变,则是一条竖线。
当然,还有斜线,左斜线右斜线什么的,如果能对照图片,大部分人都能一看即懂;只是用代码画起来就比较郁闷了,只能靠逻辑思维想出来。
如果你现在感觉对线条一片混沌,也不用担心,在学习的过程中自然会理解。

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

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 #HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 #HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 #HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 #HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 #HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 #HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 #HTML / CSS
You might like
php 计划任务 检测用户连接状态
2012/03/29 PHP
处理单名多值表单的详解
2013/06/08 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python中如何引入第三方模块
2020/05/27 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
群众路线个人整改措施
2014/10/24 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python