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实现轮播图效果实例
May 04 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
js特殊字符过滤的示例代码
2014/03/05 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python多线程抽象编程模型详解
2019/03/20 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python循环输出三角形图案的例子
2019/11/22 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
python属于解释型语言么
2020/06/15 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
const和static readonly区别
2013/05/20 面试题
怎样写离婚协议书
2014/09/10 职场文书
办理房产证委托书
2014/09/18 职场文书
靠谱的活动总结
2019/04/16 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS