<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>绘制几何图形</title>
</head>
<body>
<!-- fillRect(float x,float y,float width,float height)填充一个矩形区域
strokeRect(float x,float y,float width,float height)绘制一个矩形边框-->
<canvas id="myCanvas" width="400" height="600" style="border:3px dashed #000"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//设置填充颜色
ctx.fillStyle = "#ccc";
//填充一个矩形
ctx.fillRect(30, 30, 250, 100);
ctx.fillStyle = "#f00";
ctx.fillRect(40, 100, 150, 150);
//设置线条颜色
ctx.strokeStyle = "#F3B73F";
//设置线条的宽度
ctx.lineWidth = 6;
ctx.strokeRect(30, 200, 100, 100);
ctx.strokeStyle = "#F57284";
//设置线条链接点的风格
ctx.lineJoin = "meter";
ctx.strokeRect(50, 315, 120, 60);
ctx.strokeStyle = "#B19941";
ctx.lineJoin = "round";
ctx.strokeRect(50, 400, 120, 60);
ctx.strokeStyle = "#A6AAA9";
ctx.lineJoin = "bevel";
ctx.strokeRect(60, 470, 120, 60);
</script>
</body>
</html>
浙公网安备 33010602011771号