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


Posted in HTML / CSS onApril 14, 2014

Canvas一般是指画布,最近对用html5写游戏比较感兴趣,所以简单的用了一下Canvas。

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

在html5中,canvas是一个新增的标签:

复制代码
代码如下:

<canvas></canvas>

他有基本的html标签的所有属性,一样可以给他设置style。

复制代码
代码如下:

<canvas style="width:400px;height:300px;"></canvas>
<style>
canvas{width:400px;height:400px;background:#000;}
</style>

<canvas></canvas>
他还有一个特定的attribute:

复制代码
代码如下:

<canvas height="300" width="400"></canvas>

这里的height、width与以往的html标签的attribute不同,也与style中的height、width不同,这里主要是指canvas中的坐标范围。而style里的width、height是指canvas实际展示的大小。

比如定义下面的一个canvas:

复制代码
代码如下:

<canvas width="400" height="300" style="width:600px;height:450px;border:1px solid #000;"></canvas>

然后在canvas中画一个坐标为  100、50,大小为200、150的矩形,你会看到实际的效果如下图:

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

图中 canvas的大小是通过style决定的 600px * 450px,但是填满整个canvas的坐标只是400*300, 对应着括号里的大小。

在canvas中画图是基于坐标的,所以100, 50的坐标转化成了150px,75px的屏幕坐标,矩形的大小也由200*150转换成300px*225px的屏幕大小。

你可以按照下面的代码自己试一试:

复制代码
代码如下:

<!doctype html>
<html></p> <p><body>
<canvas width="400" height="300" style="width:600px;height:450px;border:1px solid #000;"></canvas>
<script>
var context =document.getElementsByTagName("canvas")[0].getContext("2d");
context.fillRect(100,50,200,150);
</script>
</body>
</html>

canvas的还有些其他attribute,还没有去看,他还有一个主要的方法,就是getContext(),这个方法就是获取画图的对象。

通过canvas的dom对象,可以调用getContext("2d")的方法获取对应的画图对象:

var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
在开发者控制台里可以看到这个drawing2d的属性及方法:

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

包含了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:开始画线,配合moveTo\lineTo\closePath等画折线或多边形

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对比了一下:

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

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

HTML / CSS 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
html5图片上传预览示例分享
Apr 14 #HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 #HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 #HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 #HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 #HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 #HTML / CSS
为你的html5网页添加音效示例
Apr 03 #HTML / CSS
You might like
php递归创建目录的方法
2015/02/02 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
用ADODB.Stream转换
2007/01/22 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
js取得url地址参数实例
2013/02/22 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
vue实现简单图片上传
2020/06/30 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python如何爬取动态网站
2020/09/09 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
学习十八大报告感言
2014/02/28 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers