41 lines
1.5 KiB
HTML
Executable File
41 lines
1.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
|
||
<head>
|
||
<title>Canvas</title>
|
||
</head>
|
||
|
||
<body>
|
||
<canvas id="myCanvas" width="200" height="200" style="border: solid 1px red;">
|
||
</canvas>
|
||
<script>
|
||
// 获取Canvas元素并创建2D绘图上下文
|
||
var c = document.getElementById("myCanvas");
|
||
var ctx = c.getContext("2d");
|
||
|
||
// 绘制一个橙色填充、黑色边框的圆形
|
||
ctx.beginPath();
|
||
ctx.arc(100, 75, 50, 0, 2 * Math.PI); // 圆心(100,75)，半径50，完整圆周
|
||
ctx.fillStyle = "orange"; // 设置填充颜色为橙色
|
||
ctx.strokeStyle = 'black'; // 设置边框颜色为黑色
|
||
ctx.fill(); // 填充圆形
|
||
ctx.stroke(); // 绘制圆形边框
|
||
|
||
// 绘制一个绿色填充、红色边框的矩形
|
||
ctx.beginPath();
|
||
ctx.rect(30, 125, 150, 30); // 矩形左上角坐标(30,125)，宽度150，高度30
|
||
ctx.fillStyle = "green"; // 设置填充颜色为绿色
|
||
ctx.strokeStyle = 'red'; // 设置边框颜色为红色
|
||
ctx.fill(); // 填充矩形
|
||
ctx.stroke(); // 绘制矩形边框
|
||
|
||
// 绘制一个深蓝色填充、紫色边框的竖直矩形
|
||
ctx.beginPath();
|
||
ctx.rect(30, 10, 20, 115); // 矩形左上角坐标(30,10)，宽度20，高度115
|
||
ctx.fillStyle = "navy"; // 设置填充颜色为深蓝色
|
||
ctx.strokeStyle = 'purple'; // 设置边框颜色为紫色
|
||
ctx.fill(); // 填充矩形
|
||
ctx.stroke(); // 绘制矩形边框
|
||
</script>
|
||
</body>
|
||
|
||
</html> |