2、图形绘制 21矩形 案例2 <I DOCTYPE htmI> htmllang=enxmlns=http://www.w3.org/1999/xhtm1> <meta charset=utf-8"/> tit1e>绘制简单矩形 title /head> <body <canvas id=demo width=400 height=180" style=border: 1px solid #CCCCCc; ></canvas> script type=text/javascript> /获取 canvas元素对应的DOM对象 var canvas document getElementById(demo?) //获取在 canvas上绘图的 canvasRenderingContext2对象 var ctx canvas getContext (2d") /设置填充颜色 ctx.fisy1e=’#007ACC /绘制矩形2、图形绘制 2.1矩形 案例2: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>绘制简单矩形</title> </head> <body> <canvas id="demo" width="400" height="180" style="border:1px solid #CCCCCC;"></canvas> <script type="text/javascript"> //获取canvas元素对应的DOM对象 var canvas = document.getElementById("demo"); //获取在canvas上绘图的canvasRenderingContext2D对象 var ctx = canvas.getContext("2d"); //设置填充颜色 ctx.fillStyle = '#007ACC'; //绘制矩形