首页 > 代码库 > canvas学习日记一
canvas学习日记一
由于工作的需求，促进我学习html5 canvas技术，canvas是html5最强大的元素之一。使用它可以在浏览器中做一番奇妙的事情。大家或多或少都听过canvas的强大用处，我这里就不再赘述了。
canvas的强大功能是通过canvas的context对象表现出来的，该环境变量是可以从canvas元素身上获取。
下面先看一个canvas的例子方便讲解；在canvas上显示一个字符串，该字符串大致与canvas水平垂直居中。代码如下：
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title> canvas </title> <style type="text/css"> body {background:#DDD;} #canvas {margin:10px; padding:10px;background:#FFF;border:thin inset #AAA;} </style></head><body> <canvas id="canvas" width="600" height="300"> canvas not supported </canvas></body></html>
在上述的html代码中还使用了css对canvas来设置相应的背景色等其他css属性。所以canvas跟其它的div，h1等元素一样可以设置css样式。canvas有趣的不是在于其可以设置才算是样式，而是在于javascript代码，下面我上述的html中的canvas写程序了。代码如下：
<script type="text/javascript"> var canvas = document.getElementById(‘canvas‘), context = canvas.getContext(‘2d‘); context.font = ‘38pt Arial‘; context.fillStyle = ‘cornflowerblue‘; context.strokeStyle = ‘blue‘; context.fillText(‘Hello Canvas‘, canvas.width / 2 - 150, canvas.height / 2 + 15); context.strokeText(‘Hello Canvas‘, canvas.width / 2 - 150, canvas.height / 2 + 15);</script>
上面的javascript代码主要有三步：
1.使用document.getElementById方法获取canvas元素。
2.在canvas对象上调用getContext(‘2d‘)方法，获取绘图环境变量
3.使用绘图环境对象在canvas元素上进行绘制。
fillStyle与strokeStyle是指定图形填充，路径描边时所使用的颜色，渐变或图案。
fillText()和strokeStyle都需要3个参数：要绘制的文本内容，以及在canvas中显示文本的横纵坐标。
ps：在是设置canvas的宽度和高度的时，不能使用px后缀，虽然很多浏览器支持使用px后缀，但是从技术上来说不被canvas规范接受，而且这些取值只能是非负数。
在给canvas设置宽高的时候，有两种方法：一是直接给canvas的width和height指定属性值；二是在css中设置width和height。但是，这种设置会产生意外的效果。这里就引出了，canvas元素的大小与绘图表面的大小。如图：
蒙了吧，两个元素大小一样，绘制的图却不同。其实主要是修改width和height属性来设置canvas元素的大小，这样的话，元素自身与绘画表面的大小都会被设置成属性值。而通过css来设置的width和height值只是修改了元素的大小并没有修改绘画表面的大小，因此，浏览器会将绘画表面从默认值（300*150）拉伸到修改后的值（600*300）。
canvas是个很强大的元素，我现在所知道的只是认识canvas这个元素，需要学习的还很长，day day up吧。