Can someone point me what is wrong in this code ?
Html:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<style type="text/css">#import "js/jquery.svg/jquery.svg.css";</style>
<script type="text/javascript" src="js/jquery.svg/jquery.svg.js"></script>
<script type="text/javascript" src="js/svg.js"></script>
<body>
<div id="svgintro" style="height:800px"></div>
</body>
</html>
JavaScript:
var defs=svg.defs();
svg.linearGradient(defs, 'gradient', [[0, 'white', 1], [1, 'red', 1]], 0, 0, 0, 100, {gradientUnits: 'userSpaceOnUse'});
svg.rect(20, 400, 1500, 40, 10, 10, {fill:'url(#gradient)'});
It always show one color.
Thank you.
Solution:
svg.linearGradient(defs, 'gradient', [['0%', 'white'], ['100%', 'red']], 20, 400, 20, 440, {gradientUnits: 'userSpaceOnUse'});
The problem here, as far as I can tell, is that the x1, y1, x2, y2 attributes of linearGradient are in absolute coordinates, not relative to the object you're applying the gradient to. So your gradient ends at y:100 but the top of your rectangle is at y:400, so it only gets the red part of the gradient applied.
See http://jsfiddle.net/nrabinowitz/VTKj2/1/ for an example, showing that a rectangle with the top at y:20 has the gradient properly applied.
Related
I've recently been using ScrollMagic, and so far it's been easy to use. However, after finishing my section slides i've noticed that whenever I load the page at the section slide top, all the slides will be visible until I update it. Returning back to the top will only show the first slide as intended? Is there a way to force update the section slides to prevent this?
faulty section slides
Javascript:
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
.fromTo("#panel1", {x: "0%"} , {x: "100%", ease: Linear.easeNone}, 0) // in from right
.fromTo("#panel2", {x: "-100%"} , {x: "0%", ease: Linear.easeNone}, 0) // in from left
.fromTo("#panel2", {x: "0%"} , {x: "100%", ease: Linear.easeNone}, 1) // in from right
.fromTo("#panel3", {x: "-100%"} , {x: "0%", ease: Linear.easeNone}, 1); // in from left
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: ".main",
triggerHook: "onLeave",
duration: "300%"
})
.on("start", function (event) {
})
.setPin(".main")
.setTween(wipeAnimation)
.addTo(controller);
...and HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div id="panel1" class="panel">
<p>redacted</p>
</div>
<div id="panel2" class="panel">
<p>redacted</p>
</div>
<div id="panel3" class="panel">
<p>redacted</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
<script src="index.js"></script>
</body>
</html>
Tried using both enter and start events to trigger
scene.update(true);
, but it doesn't work.
I am new to learn JCanvas. I am trying to implement a simple JCanvas program.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src='jcanvas.min.js'></script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
<script>
var canvas = document.getElementById("drawingCanvas");
var ctx = canvas.getContext("2d");
$('canvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
</script>
</body>
</html>
But I am unable to Implement the above.
The Circle I am trying to draw here is not getting displayed on the canvas.
What Am I doing wrong?
Looks like your code is quite fine itself. Consider wrapping your code in $(document).ready(function () {});, like this:
<script>
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
This guarantees that your code will executed when the whole DOM structure is loaded in browser memory and ready to interact with JavaScript. See jQuery docs for more details.
I've also created jsFiddle, where your code just works. I attached the jCanvas using URL from here, so it might stop working occasionally.
UPDATE: removed unused variables from the code, added id to jQuery selector.
UPDATE2: Without jsFiddle, it should look like that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sample</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
</body>
</html>
UPDATE3: Please do not use jCanvas attaching like in the sample above, the link was grabbed from jCanvas showroom and is not supposed to be reliable CDN. It might be changed or removed, and it might not be ready to high load.
there are probably other ways, but this works. I sourced jCanvas and jQuery internally
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src='jcanvas.min.js'></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function init(){
$("canvas").drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
</body>
</html>
The following webpage will draw a box with a line through it (using http://raphaeljs.com)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="raphael-min.js"></script>
</head>
<body onload="init()">
<script type="text/javascript">
function init() {
paper = Raphael("paper1", 100, 100);
paper.rect(40, 40, 20, 20);
paper.path("M50,10L50,90");
}
</script>
<div id="paper1"></div>
</body>
</html>
I want the box to cover the line. I've tried applying every combination of opaque, fill-opacity and stroke-opacity and done a silly number of searches (Google, this site, etc). Nothing works.
This is what you want I think. The rect must be filled so its contents are opaque.
paper = Raphael("paper1", 100, 100);
paper.path("M50,10L50,90");
var rect = paper.rect(40, 40, 20, 20);
rect.attr({fill: "white"});
I want to write text with the print () function. I added cufon file. Unfortunately, the text is not displayed. Why? Please help me.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
<script src="raphael.js" type="text/javascript"></script>
<script src="harabara.cufonfonts.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onload = function() {
var r = new Raphael('holder', 640, 480);
var font1 = r.getFont("Harabara");
var text1 = r.print(10,100, "click me", font1, 48).attr({"stroke-width": 3, fill: "red", "stroke": "blue"});
};
</script>
<style type="text/css">
#holder { width: 640px; height: 480px; border: 2px solid #aaa; }
</style>
<div id="holder"></div>
</body>
One thing I see right away:
var text1 = r.print(10,100, "click me", font1, 48).attr({"stroke-width": 3, fill: "red", "stroke": "blue"});
returns a Raphael path object. So you need to assign that path to your Raphael paper.
Paper.print() Creates path that represent given text written using
given font at given position with given size. Result of the method is
path element that contains whole text as a separate path.
http://raphaeljs.com/reference.html#Paper.print
Have not tested it yet, but just leaving the code the way you wrote will not print anything to the paper.
One more thing: keep your style tags in your header.
I've debugged my code and realized that a method in my Javascript isn't working properly. Anyone have an idea why?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tetris</title>
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<canvas id="tetrisBoard" width="800" height="600">
Your browser does not support HTML 5.
</canvas>
<p>
</p>
</body>
</html>
main.js:
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
The result of document.getElementById("tetrisBoard") is a null value. Why?
Because you're calling your code prior to the elements existing. Put the script right before the closing body tag and you'll be fine.
Another solution is to do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tetris</title>
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="setup();">
<canvas id="tetrisBoard" width="800" height="600">
Your browser does not support HTML 5.
</canvas>
<p>
</p>
</body>
</html>
Then, in your main.js use something like this:
function setup() {
// Your code here
}
The good thing about this is that you don't have to put the script tag in an unintuitive and unstandard spot (such as right before the end of the body).
Also you could make the script to wait until all the DOM it is loaded... like this:
using jquery
$(document).ready(function(){
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
});
vanilla JavaScript:
document.addEventListener("DOMContentLoaded", function () {
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
}, false);