绘制步骤
获取canvas对象
var oCanvas = document.getElementById("canvas");
取得上下文context
var context = oCanvas.getContext("2d");
绘制图形
根据需求选择方法
绘制长方形/边框/填充色彩
Context.lineWidth=1;
Context.fillRect(x,y,width,height);
Context.strokeRect(x,y,width,height);
<html> <head> <meta charset="UTF-8"> <title>画布-矩形</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> //必要的两个条件 //1.获取canvas对象 var oCanvas = document.getElementById("canvas"); //2.取得上下文context var context = oCanvas.getContext("2d"); //一.context做操作，绘制图形 //1.颜色，css样式 context.fillStyle= "#ededed"; //2.起点终点宽度高度，执行，fillRect填充矩形，有填充 context.fillRect(0,0,500,500); context.fillStyle = "red"; context.fillRect(50,50,100,100); //边框，strokeRect无填充,strokeStyle默认黑色 context.strokeStyle = '#40bfe0'; context.lineWidth = '4'; //框的宽度，默认1 context.strokeRect(50,50,100,100); </script> </body> </html>