Canvas学习
2011-07-27 13:50 呦菜 阅读(336) 评论(0) 编辑 收藏 举报最近看过一些关于canvas的文章,由于以后的工作项目中会用到,便开始学习一下。
<canvas>元素是HTML5标准的一部分。<canvas>只有两个属性,width和height,并且都是可选的。默认的宽为300px,高为150px。<canvas>元素必须有结束标签</canvas>.
<canvas id="tutorial" width="150" height="150"></canvas>这样并没有对<canvas>只是简单的创建了一个canvas对象而已,这个时候的canvas元素和div没有区别,如果不设定样式的话再页面上是看不出来的。想要用javascript在上面画图首先需要渲染上下文,这可以通过canvas的对象getContext来实现,在传递的时候需要传递一个参数,目前唯一可以用的参数是2d.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
以下为一个简单的<canvas>实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
显示结果:
canvas只支持一种基本形状——矩形,所以其他图形都是由一个或多个路径组合而来。其中主要代码:
fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
显示结果:
fillRect 函数画了一个大的黑色矩形(100x100),clearRect 函数清空了中间 60x60 大小的方块,然后strokeRect 函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。