绘制步骤
获取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>
时间： 2024-08-28 03:38:05