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 相关文章推荐
CSS3弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 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
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
解析isset与is_null的区别
2013/08/09 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
vuex的简单使用教程
2018/02/02 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python中shape计算矩阵的方法示例
2017/04/21 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python实现五子棋小游戏
2020/03/25 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
党员培训思想汇报
2014/01/07 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技