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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 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的QRcode类与大家分享
2011/11/13 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
React优化子组件render的使用
2019/05/12 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python常见异常分类与处理方法
2017/06/04 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
往来会计岗位职责
2013/12/19 职场文书
干部行政关系介绍信
2014/01/17 职场文书
给孩子的新年寄语
2014/04/08 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书