html5中文学习网

您的位置: 首页 > html5资讯 > 最新动态 » 正文

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

[ ] 已经帮助:人解决问题
点评:HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Canvas一般是指画布,最近对用html5写游戏比较感兴趣,所以简单的用了一下Canvas。gr5HTML5中文学习网 - HTML5先行者学习网

之前接触Canvas是在silverlight和wpf上用到过他,在silverlight上Canvas是一个绝对定位的容器,里面可以放任何控件。我们通过他可以构建画布、图形应用、GIS应用等。gr5HTML5中文学习网 - HTML5先行者学习网

在html5中,canvas是一个新增的标签:gr5HTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
gr5HTML5中文学习网 - HTML5先行者学习网
<canvas></canvas>gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网
他有基本的html标签的所有属性,一样可以给他设置style。gr5HTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
gr5HTML5中文学习网 - HTML5先行者学习网
<canvas style="width:400px;height:300px;"></canvas>gr5HTML5中文学习网 - HTML5先行者学习网
<style>gr5HTML5中文学习网 - HTML5先行者学习网
canvas{width:400px;height:400px;background:#000;}gr5HTML5中文学习网 - HTML5先行者学习网
</style>gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网

<canvas></canvas>gr5HTML5中文学习网 - HTML5先行者学习网
他还有一个特定的attribute:gr5HTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
gr5HTML5中文学习网 - HTML5先行者学习网
<canvas height="300" width="400"></canvas>gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网
这里的height、width与以往的html标签的attribute不同,也与style中的height、width不同,这里主要是指canvas中的坐标范围。而style里的width、height是指canvas实际展示的大小。gr5HTML5中文学习网 - HTML5先行者学习网

比如定义下面的一个canvas:gr5HTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
gr5HTML5中文学习网 - HTML5先行者学习网
<canvas width="400" height="300" style="width:600px;height:450px;border:1px solid #000;"></canvas>gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网
然后在canvas中画一个坐标为  100、50,大小为200、150的矩形,你会看到实际的效果如下图:gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网

图中 canvas的大小是通过style决定的 600px * 450px,但是填满整个canvas的坐标只是400*300, 对应着括号里的大小。gr5HTML5中文学习网 - HTML5先行者学习网

在canvas中画图是基于坐标的,所以100, 50的坐标转化成了150px,75px的屏幕坐标,矩形的大小也由200*150转换成300px*225px的屏幕大小。gr5HTML5中文学习网 - HTML5先行者学习网

你可以按照下面的代码自己试一试:gr5HTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
gr5HTML5中文学习网 - HTML5先行者学习网
<!doctype html>gr5HTML5中文学习网 - HTML5先行者学习网
<html></p><p><body>gr5HTML5中文学习网 - HTML5先行者学习网
<canvas width="400" height="300" style="width:600px;height:450px;border:1px solid #000;"></canvas>gr5HTML5中文学习网 - HTML5先行者学习网
<script>gr5HTML5中文学习网 - HTML5先行者学习网
var context =document.getElementsByTagName("canvas")[0].getContext("2d");gr5HTML5中文学习网 - HTML5先行者学习网
context.fillRect(100,50,200,150);gr5HTML5中文学习网 - HTML5先行者学习网
</script>gr5HTML5中文学习网 - HTML5先行者学习网
</body>gr5HTML5中文学习网 - HTML5先行者学习网
</html>gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网
canvas的还有些其他attribute,还没有去看,他还有一个主要的方法,就是getContext(),这个方法就是获取画图的对象。gr5HTML5中文学习网 - HTML5先行者学习网

通过canvas的dom对象,可以调用getContext("2d")的方法获取对应的画图对象:gr5HTML5中文学习网 - HTML5先行者学习网

var canvas = document.getElementsByTagName("canvas")[0];gr5HTML5中文学习网 - HTML5先行者学习网
var context = canvas.getContext("2d");gr5HTML5中文学习网 - HTML5先行者学习网
在开发者控制台里可以看到这个drawing2d的属性及方法:gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网

包含了fillStyle、stokeStyle、lineCap、font等画笔样式类的属性,fillRect、strokeRect、beginPath、moveTo、lineTo、closePath、stroke、fill、drawImage等画图动作的方法,还有一些其他的一些transfrom、save等方法。gr5HTML5中文学习网 - HTML5先行者学习网

简单说一下我看了的几个属性和方法,其他的需要自己去摸索哦:gr5HTML5中文学习网 - HTML5先行者学习网

fillStyle:填充样式,可以是颜色值的html码 如红色:#ff0000,其他是不是支持css3的更多属性就不知道了gr5HTML5中文学习网 - HTML5先行者学习网

strokeStyle:线条样式gr5HTML5中文学习网 - HTML5先行者学习网

font:字体样式gr5HTML5中文学习网 - HTML5先行者学习网

fillRect:function(x,y,width,height),直接按fillStyle填满一个矩形gr5HTML5中文学习网 - HTML5先行者学习网

strokeRect:function(x,y,width,height),直接按strokeStyle描一个矩形边gr5HTML5中文学习网 - HTML5先行者学习网

beginPath:开始画线,配合moveTo/lineTo/closePath等画折线或多边形gr5HTML5中文学习网 - HTML5先行者学习网

moveTo:function(x,y)将画线起点移动到新的坐标gr5HTML5中文学习网 - HTML5先行者学习网

lineTo:function(x,y)从当前点画的目标点gr5HTML5中文学习网 - HTML5先行者学习网

closePath:从当前点连接到起点gr5HTML5中文学习网 - HTML5先行者学习网

stroke:按照上面的路径按strokeStyle画折线gr5HTML5中文学习网 - HTML5先行者学习网

fill:按上面的路径按fillStyle画矩形gr5HTML5中文学习网 - HTML5先行者学习网

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

可以看下上面画矩形的方法:gr5HTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
gr5HTML5中文学习网 - HTML5先行者学习网
context.fillRect(100,50,200,150);gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网

画一条折线:gr5HTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
gr5HTML5中文学习网 - HTML5先行者学习网
context.beginPath();gr5HTML5中文学习网 - HTML5先行者学习网
context.moveTo(10,10);gr5HTML5中文学习网 - HTML5先行者学习网
context.lineTo(10,110);gr5HTML5中文学习网 - HTML5先行者学习网
context.lineTo(110,110);gr5HTML5中文学习网 - HTML5先行者学习网
context.lineTo(110,10);gr5HTML5中文学习网 - HTML5先行者学习网
context.closePath();gr5HTML5中文学习网 - HTML5先行者学习网
context.stroke();gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网

canvas具有绘图的功能,但是在用户交互上似乎比较乏力。拿silverlight的canvas、.NET的Bitmap、html的div与canvas对比了一下:gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网
gr5HTML5中文学习网 - HTML5先行者学习网

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

gr5HTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助