[Canvas学习]基本用法
简介
<canvas>是一个可以使用JavaScript在其中绘制图形的HTML元素，可以用于制作照片集或者制作动画。
Canvas默认大小是300px*150px，但是可以使用HTML的高度和宽度属性来自定义Canvas的尺寸。
基本用法
<canvas id="tutorial" width="150" height="150"></canvas>
canvas需要使用结束标签，只有两个属性width,height。可以使用DOM的属性来进行设置，也可以使用CSS来定义大小。同时canvas也可以拥有margin, border, background等属性
对于不支持canvas的浏览器，只需要在canvas标签中提供替换内容，这样支持canvas的浏览器就会忽略容器中包含的内容。而只是正常渲染canvas
<canvas id="stockGraph" width="150" height="150">
current stock price: $2.15+0.12
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt="clock">
</canvas>
渲染上下文
canvas元素创造了一个固定大小的画布，公开了一个或多个渲染上下文，可以用来绘制和处理想要展示的内容。
var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");
兼容性写法
var canvas = document.getElementById("tutorial");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
}
DEMO
<html>
<head>
<meta charset="utf8" />
<title>Canvas入门小实例</title>
</head>
<body>
<canvas id='canvas' width="150" height="150"></canvas>
</body>
<script>
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>
</html>
