Canvas学习笔记(一)--基础知识

lib

浏览: 135972 次
性别:
来自: 济南

最近访客更多访客>>

xuecaobao123

书生Zhuang

ananiah

max530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5
web前端
canvas

web前端 html5 canvas

1、<canvas>元素

id：不是<canvas>元素专享，和标准的html标签一样，都可以为元素指定id；

width：元素宽度，默认为300px。可以通过dom和css进行设置；

height：元素高度，默认为150px。可以通过dom和css进行设置；

注：使用css设置width和height时，渲染图像会缩放适应布局，这意味着图像发生了变形，这时需要显示指定canvas的width和height属性的值。

canvas默认是全透明的，但是可以像图片一样指定样式（边距、边框、背景等），指定的样式不会对图像产生影响。

为了兼容旧版本浏览器，canvas提供了替换内容，例如：

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150"/>
</canvas>

2 、渲染上下文

canvas初始化是空白的，要在上面画图首先需要渲染上下文，

//通过id获取canvas元素对象
var canvas = document.getElementById('canvas_test');

//通过canvas获取上下文
//注：2d是目前唯一的选择
var context = canvas.getContext('2d');

3 、简单的例子

<!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>
  	<style type="text/css">
		.wraper {
			position: relative;			
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){
			var canvas = document.getElementById('test');
			if(canvas.getContext){
				var context = canvas.getContext('2d');
				
				context.fillStyle = "rgba(200,0,0,1)";
				context.fillRect(10,10,50,50);

				context.fillStyle = "rgba(0,0,200,0.3)";
				context.fillRect(30,30,70,70);
			}
			
		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>

运行后的效果：