I am having an issue trying to get these 3 divs to line up on the same horizontal pane.
I will also like to know if it is possible to have the color of my circle change based on a value of a variable. I would greatly appreciate an example function.
<html>
<body>
<style type="text/css">
.circle
{
width:115px;
height:115px;
border-radius:250px;
font-size:20px;
color:#fff;
line-height:115px;
text-align:center;
background:#000
}
</style>
<div id="container" style=" border: 2px coral solid; width:100%; height:120px;">
<div class="circle">Hello</div>
<div id="leadInfo" style="width:37%; height:115px; float:left; background-color:yellow;"> </div>
<div id="leadInfo2" style="width:37.5%; height:115px; float:right; background-color:blue;"> </div>
</div>
</body>
</html>
First you wrote
float: leftt;
Instead of
float: left;
Also, try adjusting one of the yellow circles to be less then 37.5%, it somehow goes over 100% in total and jumps down. So 37% will be enough.
<div id="container" style=" border: 3px coral solid; width:100%; height:auto;">
<div id="colorwheel" style="width:25%; float:left; border: 3px coral solid;">
<canvas id="circlecanvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle="red";
context.fill()
</script>
</div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div style="clear:both"></div>
</div>
And about changing the color of a circle on canvas...
No, you can't change anything you've drawn on the canvas (including your circle).
That's because canvas doesn't "remember" where it drew your circle. Your circle becomes an un-remembered group of pixels on the canvas.
Therefore, if you want to change anything on the canvas, you must erase the canvas and redraw your circle using the fillStyle in your variable.
// create a variable to hold your desired fill color
var myFillColor="gold";
// clear the canvas
context.clearRect(0,0,canvas.width,canvas.height);
// set the context.fillStyle to your variable
context.fillStyle=myFillColor;
// redraw your circle
context.beginPath();
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fill();
Important note: context.arc is a path command and every group of path commands must be preceeded by context.beginPath. beginPath tells the browser you are finished drawing the previous path and are now drawing a new path. Failing to start new paths with beginPath will cause your next context.fill (or context.stroke) command to redraw all previous path commands.
Related
i'm new in Javascript and i got a task which i can't even solve..
I have to get a HTML 5 Drag and Drop, which can add Elements as much as i want, and if i want to edit one of the new elements or change the Position it has to be easy.
This is what it look like now:
http://picul.de/view/HRO
at the moment this don't work as i need..
who can help me?
var dragok = false;
var pos;
function allowDrop(e)
{
e.preventDefault();
}
function get_pos(e)
{
pos = [e.pageX , e.pageY];
}
function drag(e)
{
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e)
{
e.preventDefault();
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
var offset = e.dataTransfer.getData("text/plain").split(',');
var data=e.dataTransfer.getData("Text");
var img = canvas = document.getElementById(data);
var dx = pos[0] - img.offsetLeft;
var dy = pos[1] - img.offsetTop;
ctx.drawImage(document.getElementById(data), e.pageX - dx-170, e.pageY - dy-100);
}
function getCoordinates(e)
{
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
x=ctx.clientX;
y=ctx.clientY;
document.getElementById("footerCoord").innerHTML="Coordinates: (" + x + "," + y + ")";
}
body {
background:#eee;
}
#DnDBox {
margin:0 auto;
margin-top:7vh;
width:80vw;
height:80vh;
padding:1vmax;
background:#f5f5f5;
/* Erstmal nur zur Übersicht */
border:1px solid #111;
}
#DnDBox #canvasBox {
border:1px solid #111;
}
#DnDBox .leftBox {
float:right;
width:25%;
height: 90%;
}
#DnDBox .leftBox select{
width:100%;
padding:5px;
margin-bottom:5px;
}
#DnDBox .leftBox .dragBox{
float:right;
width:100%;
height: 90%;
/* Erstmal nur zur Übersicht */
border:1px solid #111;
}
#DnDBox .leftBox .dragBox ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#DnDBox .leftBox .dragBox ul > li{
float:left;
padding:20px;
text-align:center;
background:#eee;
}
#DnDBox .leftBox .dragBox ul > li:hover{
padding:20px;
text-align:center;
background:#ddd;
}
#DnDBox .leftBox img{
cursor:move;
}
#DnDBox .leftBox img:active{
cursor:move;
}
#DnDBox footer {
float:left;
margin-top:5px;
padding:5px;
width:100%;
border:1px solid #111;
}
<div id="DnDBox">
<canvas id="graphCanvas" onmousemove="getCoordinates(event)" ondrop="drop(event)" ondragover="allowDrop(event)" height=400 width=700 style="border:1px solid #000000;"></canvas>
<div class="leftBox">
<select name="plh1">
<option>Test</option>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<select name="plh2"></select>
<div class="dragBox">
<ul>
<li><img id="img1" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
<li><img id="img2" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
<li><img id="img3" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
</ul>
</div>
</div>
<footer id="footerCoord">asd</footer>
</div>
greets,
daniel
You can't drag an image painted onto a canvas around without additional support - the painted image is just a set of pixels that are part of the canvas's image data.
You may be interested in a canvas library called Fabric.js (tag and homepage). I'm not "recommending" it as such - I haven't used it - but you can certainly drag canvas objects created by the library on the homepage.
A simpler solution might be to use JavaScript/HTML without the canvas. Replace the canvas with, say, a relative DIV element (so it can act as a container for absolutely positioned elements). Then dropping an image on the DIV creates a new Image object (say a clone of the image dragged) and absolutely positions it within the container according to where it was dropped. The new copy of the image can have it's own drag handlers to move it around the container and program options could be added to delete a (cloned) dropped image as necessary.
You could also calculate the position of the mouse relative to the image element when starting a drag operation. This would allow dropping it under the mouse in the same relative position to the mouse cursor as at the start of the drag operation. This question on retrieving the X Y position of an element may be of help. (At the moment the dropped image does not appear under the cursor.)
You need to keep track of the elements. The canvas is just a bitmap image with no understanding of what a circle or square is.
Ideas:
(1) Create a separate canvas with a transparent background for each shape that you make and overlay them. When clicking on or touching a point of the canvas repeatedly, cycle through the potential target elements below that event, highlighting them in some way. When the correct element is selected, define an event (a gesture) that will allow the user to select that target for editing. Stop the selection function and initiate the editing function.
(2) Forget the canvas thing, and do it all with SVG
Basically, I'm trying to create a game in which circles will spawn on a canvas and the user has to click them as fast as possible. The circles should spawn randomly on the canvas and have a certain radius. Once the user clicks a circle, they are awarded points based on the time it took them to click the circle (less time = more points). After the user clicks the circle, it disappears, and another circle randomly spawns somewhere on the canvas, and the user keeps doing this until 100 circles are clicked overall.
The whole point of this game is to help improve accuracy and reflex for FPS games. I decided I would create a game like this to help myself mainly, and for anyone else because I couldn't find a game like this online that fit my needs.
Anyway, here's the code for the game I have so far. If anyone could help me in the direction of further developing this game or even completing it, it would be much appreciated.
HTML:
var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
function spawnTarget() {
}
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(0, 0, 255);
text-align: center;
}
#header {
display: inline-block;
background-color: rgb(255, 255, 255);
margin: 64px auto;
border-radius: 16px;
}
h1 {
font-family: Arial;
font-size: 128px;
color: rgb(0, 0, 0);
}
#myCanvas {
width: 1800px;
height: 900px;
border: 4px solid rgb(0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<title>Aim Practice</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>Aim Practice</h1>
</div>
<div id="container">
<canvas id="myCanvas">
</canvas>
</div>
</body>
</html>
because the circles won't be actual DOM elements, you will have to listen for click events on the canvas, and compare the screenX and screenY on the click event to the canvas coordinates of he circle in question. Remember to add in the offset of the canvas relative to the screen. You will also have to manually calculate whether the click is inside the circle or not.
i have been trying for like 3 hours to make this shape
on a div using css
Canvas drawing is accepted , but Css is prefered
Thanks guys :D
Another Solution
if any one is looking for the Canvas solution or the non-solid background here is it https://jsfiddle.net/roonie007/hemjfonx/1/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var curveStrength = 50 ;
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(canvas.width/2, curveStrength, canvas.width, 0);
context.lineTo(canvas.width,canvas.height);
context.lineTo(0,canvas.height);
context.lineTo(0,0);
context.fillStyle = "black";
context.fill();
It would be useful to know what kind of shape that is. I am cutting an ellipse in half for my solution.
This was kind of fun.
Edit: Changed my code a little bit to look crisper.
#box {
width:300px;
height:50px;
background:black;
overflow:hidden;
}
#box::before{
content:'';
display:block;
width:300px;
height:30px;
background:white;
border-radius:0 0 50% 50%;
position:relative;
top:-15px;
}
<div id="box">
</div>
HTML:
<div>
<canvas id="text_box" class="textbox" >
</canvas>
</div>
CSS:
.textbox{
position:absolute;
background: black;
left:100px;
width:750px;
height:100%;
margin: 0;
padding: 0;
border:0;
opacity:0.9;
display:none;
}
JavaScript
function drawCanvas() {
var canvas = document.getElementById("text_box");
var context = canvas.getContext('2d');
context.lineWidth=1;
context.fillRect(0,0,150,150);
context.fillStyle="white";
context.lineStyle="#ffff00";
context.font="12px sans-serif";
context.fillText("testestestsetestsetsetsetset.", 20, 20);
context.rect(0,0,400,400);
alert("test");
}
When I open this html, the text "test test test test test test test test test" just exceeds the width of the canvas, so the rest of it does not appear. i want the canvas(rectangle) to have a scroll bar if the text's length is long so i can scroll down to see the whole text.
I just started so I am not that familiar with the layout(css) part. can somebody give me some advice?
You can use a small div containing a larger canvas to have that div act as a "viewport" with scrollbars into the larger canvas.
HTML:
<div id=viewport>
<canvas id="canvas" width=750 height=300></canvas>
</div>
CSS:
#canvas{border:1px solid red;}
#viewport{
overflow:scroll;
width:200px; height:200px;
border:2px solid blue;
}
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.strokeStyle="#ffff00";
context.font="24px verdana";
context.fillText("This is some long text that will require scrolling to read.", 20, 50);
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
#viewport{
overflow:scroll;
width:200px; height:100px;
border:2px solid blue;
}
<div id=viewport>
<canvas id="canvas" width=750 height=150></canvas>
</div>
BTW, you have some syntax errors in the context styling commands you've used. Here's a nice cheatsheet of all the valid canvas methods and properties: https://simon.html5.org/dump/html5-canvas-cheat-sheet.html
I have an issue with sizes of objects. Here is a simple example:
<!doctype html>
<html>
<head>
<script src="js/fabric-0.9.15.min.js"></script>
</head>
<body>
<canvas id="test" width="512" height="512" style="border: 1px solid black;"></canvas>
<div style="width: 512px; background: blue;"> </div>
<script>
var canvas = new fabric.Canvas('test');
var rect = new fabric.Rect({
left: 0,
top: 0,
fill: 'red',
width: 512,
height: 512
});
canvas.add(rect);
</script>
</body>
</html>
As you can see I have a canvas with sizes of 512px and I have a div with width of 512px for testing. Also I created rect object to draw with sizes of 512px.
See screenshot
Fabric draws rect with half sizes. Can you please tell me why or what I do in wrong way?
The Rectangle is actually 512, 512. The problem you are having is the origin of your object.
Which is the middle of the rectangle,thus showing only a quarter of your rectangle.
Try changing your top and left to 256, you will see the difference.