最近快到实习的日子了,想在加强一下技术。所以果断的去学习Canvas了，之后我会把我学习的Canvas都记录下来。

Canvas简介

Canvas是HTML5中的新标签,canvas顾名思义,画布标签。开发者可以使用canvas画布中绘制各种自己喜欢的图形,但Canvas的使用并不是直接用鼠标去画就能实现的。Canvas是通过Javascript脚本操作控制来绘制的。

Canvas可以用于制作图形,动画,游戏等各种有意思的东西。

浏览器支持

对于Canvas的支持,IE8及以下都不支持,其他浏览器大部分版本都是支持的(除非你用的很老很老的版本)。

想要绘制Canvas就先创建canvas标签,并附上id,高度宽度,设置一个基础样式即可。其余就都靠Javascript来实现了。

<canvas id="canvas" width="600" height="300" style="display:block;margin:30px auto;">您的浏览器不支持canvas</canvas>
```  对于id的设置,不建议直接使用canvas,我在这里做演示,就先用canvas做id了。

  

在HTML5中,canvas的2d绘制环境提供了一套强大的绘图API，可以用它来实现一些精致的图形应用程序，但是一些需要数学来实现。

canvas可以绘制文本,线条,矩形,圆形及贝塞尔曲线，可以通过拖动鼠标来绘制,比如说制作一个画板。

绘制矩形及线条

canvas的2d绘图API提供了几个绘制矩形的方法。

clearRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)

strokeRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)

fillRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)

lineWidth属性  以像素为单位的线段宽度        取值范围 非零的正数 默认值 1.0  

lineCap属性      浏览器如何绘制线段的端点      取值范围 butt,round,square  默认值butt  

lineJoin属性       浏览器如何绘制线段的连接点  取值范围为 round,bevel,miter 默认值bevel  

miterLimit属性   斜接线长度与二分之一线段宽的比值,如果斜接线的长度超过了该值,浏览器就会以bevel的方式来绘制  

比如我们在canvas中绘制一个蓝色的正方形并且为20px的红色标签,连接点为round（round是有一个弧度的连接点）

  

<canvas id="canvas" width="600" height="300" style="display:block;margin:50px auto;">浏览器不支持canvas</canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas");//DOM获取canvas var cxt = canvas.getContext("2d");//获取canvas的2d绘图环境 cxt.fillStyle = "blue";//设置填充颜色为蓝色 cxt.strokeStyle = "red";//设置边框颜色为红色 cxt.lineWidth = 20;//设置线段宽度为20px cxt.lineJoin = "round";//设置线段连接点为round //在canvas一半的宽度与高度的地方填充一个宽50高50的正方形 cxt.strokeRect(canvas.width/2,canvas.height/2,50,50); //在canvas一半的宽度与高度的地方绘制一个宽50高50的线段  cxt.fillRect(canvas.width/2,canvas.height/2,50,50); </script>

```  最后得到的效果图:

学习是靠一步一步的提升的。别放弃就行了。

下一次讲解渐变,颜色,透明度,阴影,路径等。

对于Canvas结合JS的事件处理来说更好控制Canvas中的元素。还可以制作各种有意义的东西。