<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>什么是canvas？</h3>
<p>canvas是在html5中的一个重要元素，专门用来绘制图形。</p>
<h4>画布的创建方法：指定id、width、height</h4>
<h4>取得上下文：getContext("2d")</h4>
<h4>绘制图形的方法：fillstyle填充、storkestyle边框</h4>
<canvas id="canvas" width="500" height="350"></canvas>
<script>
var canvas_id = document.getElementById('canvas');
var content = canvas_id.getContext('2d');
content.fillStyle = "#000"; //背景颜色 设置或返回用于填充绘画的颜色、渐变或模式
content.strokeStyle = "#f60"; //边框颜色 设置或返回用于笔触的颜色、渐变或模式
content.lineWidth = 5; //边框宽度 设置或返回当前的线条宽度
content.fillRect(0,0,500,350); //最外层 绘制“被填充”的矩形
content.strokeRect(50,50,100,200);//里层 绘制矩形（无填充）
content.strokeRect(100,100,100,200);//里层 绘制矩形（无填充） </script>
</body>
</html>