<!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>