lucifinilhades

浏览: 87342 次
性别:
来自: 苏州

最近访客更多访客>>

jorum

xyqck163

zhugeyixun

kuangweidoc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 绘制图形【1】

博客分类：

HTML5/CSS3

HTML5 JavaScript canvas

canvas元素基础

canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。

在页面中放置canvas元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>canvas元素示例</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="canvas.js"></script>
	</head>
	<body>
		<h1>canvas元素示例</h1>
		<canvas id="draw" width="400" height="400"></canvas>
	</body>
</html>

绘制矩形

用canvas元素绘制图形需要经过的步骤如下：

取得canvas元素；
取得上下文（context）：进行图形绘制时需要用到图形上下文（graphics context），图形上下文中是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext()方法来获得图形上下文，并将参数设置为"2d"；
填充与绘制边框：填充是指填满图形内部、绘制边框是指不填满图形内部，只绘制图形的外框。canvas元素结合使用这两种方式来绘制图形；
设定绘制图样式（style）：在进行图形绘制时，首先要设定好绘图的样式，然后调用有关方法进行图形的绘制。所谓绘图的样式，主要是针对图形的颜色而言的，但是并不限于图形的颜色，例如：设定填充图形的样式使用fillStyle属性、设定图形边框的样式使用strokeStyle属性；
指定线宽：使用图形上下文对象的lineWidth属性设置图形边框的宽度。在绘制图形的时候，任何直线都可以通过lineWidth属性来指定宽度；
指定颜色值：绘图时填充颜色或边框的颜色分别通过fillStyle属性和strokeStyle属性来指定。颜色值使用的是普通样式表中使用的颜色值（包括颜色名称、颜色十六进制值），另外也可以通过rgb()或rgba()函数来指定颜色值；
绘制图形：分别使用fillRect()方法和strokeRect()方法来填充矩形和绘制矩形边框。

context.fillRect(x, y, width, height);
context.strokeRect(x, y, width, height);
context.clearRect(x, y, width, height);

这里的context指的是图形上下文对象，最后一个clearRect()方法将擦除指定的矩形区域中的图形，使得矩形区域中的颜色全部变为透明。

为了使用方便，将上述方法及属性封装进自定义的Canvas对象，该对象定义如下：

function Canvas(id) {
	this.id = id;
	this.canvas = document.getElementById(id);
	this.context = this.canvas.getContext('2d');
}

Canvas.prototype.fillStyle = function(style) {
	this.context.fillStyle = style;
	return this;
};

Canvas.prototype.strokeStyle = function(style) {
	this.context.strokeStyle = style;
	return this;
};

Canvas.prototype.lineWidth = function(width) {
	this.context.lineWidth = width;
	return this;
};

Canvas.prototype.fillRect = function(x, y, width, height) {
	this.context.fillRect(x, y, width, height);
	return this;
};

Canvas.prototype.strokeRect = function(x, y, width, height) {
	this.context.strokeRect(x, y, width, height);
	return this;
};

Canvas.prototype.clearRect = function(x, y, width, height) {
	this.context.clearRect(x, y, width, height);
	return this;
};

使用该自定义对象绘制图形示例如下：

$(function() {
	var canvas = new Canvas($("canvas").attr("id"));
	canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400).fillStyle("red").strokeStyle("blue").lineWidth(1).fillRect(50, 50, 100, 100).strokeRect(50, 50, 100, 100);
});

分享到：

CSS3 模块化结构 | HTML5 获取地理位置信息

2011-11-03 12:48
浏览 1555
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 绘制图形【1】

canvas元素基础

在页面中放置canvas元素

绘制矩形

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 绘制图形【1】

canvas元素基础

在页面中放置canvas元素

绘制矩形

评论

发表评论

相关推荐

使用选择器在页面中插入内容

HTML5 绘制图形【4】

CSS3 选择器【2】

HTML5 绘制图形【3】

CSS3 选择器【1】

HTML5 绘制图形【2】

CSS3 模块化结构

HTML5 获取地理位置信息

HTML5 使用Web Worker处理线程

HTML5 Web Sockets通信

HTML5 跨文档消息传输

HTML5 离线应用程序【2】

HTML5 离线应用程序【1】

HTML5 本地数据库

HTML5 Web Storage

HTML5 多媒体播放【3】

HTML5 多媒体播放【2】

HTML5 多媒体播放【1】

HTML5 拖放API

HTML5 文件API

最近访客更多访客>>