Comment créer un cercle Pyramid en utilisant CSS ou Javascript?Comment faire un cercle de connexion Pyramide en utilisant CSS ou javascript?
0
A
Répondre
0
Vous pouvez utiliser HTML5 Canvas pour tracer des lignes et le cercle.
exmaple:
function drawCircle(ctx, x, y, r){
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.stroke();
}
function drawLine(ctx, fromX, fromY, toX, toY){
ctx.moveTo(fromX,fromY);
ctx.lineTo(toX,toY);
ctx.stroke();
}
function drawCircleAndLine(ctx, fromX, fromY, toX, toY, r){
\t drawLine(ctx, fromX, fromY, toX, toY);
\t drawCircle(ctx, fromX, fromY, r);
drawCircle(ctx, toX, toY, r);
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Defines your node here
drawCircleAndLine(ctx, 300, 100, 400, 200, 40);
drawCircleAndLine(ctx, 300, 100, 200, 200, 40);
drawCircleAndLine(ctx, 400, 200, 500, 300, 40);
drawCircleAndLine(ctx, 200, 200, 100, 300, 40);
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
JS Fiddle: https://jsfiddle.net/5cp4pzL9/
0
margin-left: 100px;
height: 109px;
background-color: red;
width: 3px;
-ms-transform: rotate(20deg);
/* -webkit-transform: rotate(20deg); */
transform: rotate(29deg);
+0
Bien que cet extrait de code peut résoudre la question, [y compris une explication] (http://meta.stackexchange.com/ questions/114762/explaining-code-based-answers) aide vraiment à améliorer la qualité de votre message. Rappelez-vous que vous répondez à la question pour les lecteurs dans le futur, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code. –
Merci son travail .. – Shahnawaz