На самом деле я Zodiak
Участник
-
Автор темы
- #1
Не работает этот код на странице, в чем проблема ?
Пожалуйста, авторизуйтесь для просмотра ссылки.
нашел на просторах необъятного, мой код:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>PROJECT</title>
<link rel = "stylesheet" href="style.css">
<meta charset="utf-8">
<script src="js.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="cap"><h1>NAME</h1></div>
<canvas id="myCanvas" width="50" height="300"></canvas>
</body>
</html>
CSS:
body{
background: url(images/bg4.png) no-repeat center center fixed; ;
background-size: cover;
}
.cap
{
text-align: center;
background-color:cadetblue;
border-radius: 10px;
width: 100%;
height: 40px;
}
h1
{
color: #27261A;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}
JavaScript:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var height = canvas.height;
var space = 5;
var radius = 7;
var linelength = height / 2;
context.lineWidth = 4;
context.beginPath();
context.moveTo(20+radius, space);
context.arcTo(20, space, 20, space+radius, radius);
context.lineTo(20, linelength - radius);
context.arcTo(20, linelength, 20 - radius, linelength, radius);
context.arcTo(20, linelength, 20, linelength + radius, radius);
context.lineTo(20, height - space - radius);
context.arcTo(20, height - space, 20 + radius, height - space, radius);
context.stroke();
