虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的。所以,如果你想学习Canvas画图,你必须要有Javascript基础。
另外,画图嘛,总有一些图像方面的术语和知识点,所以如果你有过做图或美工经验,学习Canvas会更容易。
Canvas,意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以,把他看成一块实实在在的画布可以加快理解。
画布
用canvas作画,首先,你需要有一块“画布”。如果你的书架里面没有画布,你可以买一卷回来放进去。当然,在网页里面我们不需要花钱买,直接写一个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');
哈哈哈哈,好像成功了,在没测试之前我也是这么想的,但,其实这只是一个幻觉!
因为我发现,我把其中一支笔蘸上红墨水,另外一支笔也自动蘸上了红墨水!因为两支笔是一体的!
如果你需要画出不同的颜色,办法就是把这只唯一的“笔”不停的蘸上新颜色。
这其实不是一个优点,是个缺陷,以后你会体会到的。
坐标
2d世界,就是平面,在一个平面上确定一个点,需要两个值,x坐标和y坐标。这是一个很重要的基础概念。
canvas的原点是左上角,跟flash一样。但是数学中的原点是左下角。这个…只能说习惯就好
一些画图的基本常识
首先你需要知道,怎样的坐标变化会画出什么线?比如,x坐标变大而y坐标不变,则能画出一条横线;y坐标变化而x坐标不变,则是一条竖线。
当然,还有斜线,左斜线右斜线什么的,如果能对照图片,大部分人都能一看即懂;只是用代码画起来就比较郁闷了,只能靠逻辑思维想出来。
如果你现在感觉对线条一片混沌,也不用担心,在学习的过程中自然会理解。
其他
canvas有一个和现实的画布不一样的特点就是,他默认是透明的,没有背景色。这在大部分时候非常重要。
CSS教程:div垂直居中的N种方法
模拟就可以使用vertical-align了。注意,display:table和
display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个
元素:
div#wrap {
height:400px;
display:table;
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
现在我们要使这段文字垂直居中显示! Webjx.Com
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在
Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法
四、在Internet Explorer中的解决方案
在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素
进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的
高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段:
如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进
行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上
边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去
,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
div#content {
border:1px solid #000;
position:relative;
top:-50%;
当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出
处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理,我也只是了解了一点皮毛,还要再研究)
现在我们要使这段文字垂直居中显示!
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可
以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”:
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
div#content {
_position:relative;
_top:-50%;
至此,一个完美的居中方案就产生了。
现在我们要使这段文字垂直居中显示!
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
p.s. 垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同