html5的canvas元素使用方法介绍(画矩形、画折线、圆形)

2020-04-24 18:51:46易采站长站整理

包含了fillStyle、stokeStyle、lineCap、font等画笔样式类的属性,fillRect、strokeRect、beginPath、moveTo、lineTo、closePath、stroke、fill、drawImage等画图动作的方法,还有一些其他的一些transfrom、save等方法。

简单说一下我看了的几个属性和方法,其他的需要自己去摸索哦:

fillStyle:填充样式,可以是颜色值的html码 如红色:#ff0000,其他是不是支持css3的更多属性就不知道了

strokeStyle:线条样式

font:字体样式

fillRect:function(x,y,width,height),直接按fillStyle填满一个矩形

strokeRect:function(x,y,width,height),直接按strokeStyle描一个矩形边

beginPath:开始画线,配合moveTolineToclosePath等画折线或多边形

moveTo:function(x,y)将画线起点移动到新的坐标

lineTo:function(x,y)从当前点画的目标点

closePath:从当前点连接到起点

stroke:按照上面的路径按strokeStyle画折线

fill:按上面的路径按fillStyle画矩形

drawImage: function(image,x,y,width,height)将Image对象添加的画布上。注意这里的image对象必须是已经加载完毕的。如 var img = new Image();img.src="test.png";img.onload = function(){/*在这里才能将image添加到画布*/}

可以看下上面画矩形的方法:

复制代码
context.fillRect(100,50,200,150);

画一条折线:

复制代码
context.beginPath();
context.moveTo(10,10);
context.lineTo(10,110);
context.lineTo(110,110);
context.lineTo(110,10);
context.closePath();
context.stroke();

canvas具有绘图的功能,但是在用户交互上似乎比较乏力。拿silverlight的canvas、.NET的Bitmap、html的div与canvas对比了一下:

个人感觉canvas和Bitmap更像,是一个将Bitmap放到浏览器端的一个版本,当然我们可以通过他来实现更多的功能。canvas本身能实现的还是比较少,但是配合现有的其他浏览器端应用的技术肯定能创造出更多好的应用。