I'm not able to access the canvas id using jquery.
I added the jQuery Library. But I'm not able to get an alert when I click the canvas id.
But javascript is working fine.
<script>
$(document).ready(function(){
$('#sq').click(function(){
alert('test');
});
});
</script>
<canvas id="example" width="260" height="200">
<h2>Shapes</h2>
<p>A rectangle with a black border. In the background is a pink circle. Partially overlaying the
circle.
Partially overlaying the circle is a green
square
and a purple triangle,
both of which are semi-opaque, so the full circle can be seen underneath.</p>
</canvas>
Everything you've put inside your canvas element is fallback content : It won't be used in a modern browser so you can't access it and you certainly can't click on it.
The correct use of a canvas in a modern browser is to draw onto it using its context.
From the MDN :
The < canvas > element is an HTML element which can be used to draw
graphics via scripting (usually JavaScript). For example, it can be
used to draw graphs, make photo compositions, create animations or
even do real-time video processing.
If you want to catch clicks on the canvas, do
$('#example').click(function(){ // <-- use the id of the canvas
alert('test');
});
You are not suppose to put html elements inside the canvas tag. The idea of the canvas is to draw on it using code (a.k.a. javascript).
What you are doing isn't gonna work (or more likely will be seen only if the browser doesn't support canvas - which means very very old browsers) :)
Take the html elements out of the canvas and change $('#sq').click(function(){ to $('#example').click(function(){
Look at this:
http://jsfiddle.net/Zprb4/
Related
I'm trying to center something on the stage using javascript inside an Adobe Animate CC canvas doc. Before in AS3 I would have accesses to the stage property.
So I would be able to do something like this
trace(stage.width);
I tried the same in js, but doesn't seem to work.
console.log(stage.width);
Does anyone know if there is an equivalent to the stage property in create js?
In a canvas project, use stage.canvas.width
For example, if you have a clip named myClip, you can center it like this:
this.myClip.x = stage.canvas.width / 2;
container.x = (lib.properties["width"]/2);
container.y = (lib.properties["height"]/2);
you can set values to lib properties. example:
lib.properties["height"] = "800"; // change to whatever you want
You can check your main js files top lines. These lines affect the style of you main canvas tag(check with inspect element). Notice that stage.canvas.width/heigth values change with browser resizing but lib.properties not so much
check image --> using lib. properties instead of stage
I'm not sure how to change the size or position in the .js,
In Adobe Animate cc 2015.2 you simply open the .fla file and go to "publish settings" and select "centre stage" + "make responsive". this obviously for the browser.
If you mean actually positioning the stage to centre inside Animate CC.
You will find an icon next to the "zoom" (100%), just click that and it will centre your project. Image of the icon I am talking about.
Is it possible to make a mouse event not fire on transparent color of an image?
I have a big background image and several small images which are shaped in different shapes (for example the shape of a ball). I want to catch mouse events on these small images. The problem is that events fire on the whole rect of an image. I can use image map on the background image but this is not a good idea because the small images will be changing under mouse (sprites).
You can check a number of things, either the fill of an svg shape, path or rect or also the opacity property depending on how you have made the element transparent.
For instance:
$('svg rect').mouseenter(function(){
if($(this).attr('opacity') != 0){
$('body').append('hovered element with colour');
}
});
Here is an example:
http://codepen.io/EightArmsHQ/pen/zxLbXO
Edit
With more complex images like
http://mobilite.mobi/wp-content/uploads/white-rabbit-wallpapers-9.
You have two options. The (to me, a graphic designer turned web designer) the simpler way would be to create an SVG hit map)
But a solution that would be far more thorough would be to use HTML5 / JavaScript canvas element which can have all of this stuff included, but will be more complex to initially code.
If you use the words canvas alpha hit detection I'm sure you'll be able to google some great results, such as
Image map by alpha channel
what you can do is add classes for those small small shapes. for example
<div class="big_back" id="big_back">
<div class="small_shapes" id="shape1">
</div>
<div class="small_shapes" id="shape2">
</div>
<div class="small_shapes" id="shape3">
</div>
</div>
and in jquery you can call the method as follow
$(document).ready(function() {
$(".small_shapes").mouseenter(function() {
alert("I enteres shapes");
});
});
If this is not what you are looking let me know.
I would like to create an element, that shows a red circle. Once the user clicks on it, she can record her voice. In order to show the LIVE mode, I'd like to make the circle "breath" according to the incoming frequencies.
I'm experimenting with a <canvas> element. That means it creates a circle that gets bigger and smaller, depending on the variable arcrad. However, the lines are being drawn correctly, but they do not disappear afterwards. I tried to apply .clip() but can't get it to work...
if (arcrad <= 10) arcrad = 10;
analyserContext.beginPath();
analyserContext.arc(100,120,arcrad,0,2*Math.PI);
analyserContext.closePath();
analyserContext.lineWidth = 2;
analyserContext.strokeStyle = 'red';
analyserContext.stroke();
Any ideas - or completely different strategies for this use case?
Canvas will overdraw by default. For your animation you’ll need to clean the canvas at the start of each frame. Use something the following at the start of your drawing function:
analyserContext.clearRect(0,0,200,200);
assuming your canvas is 200 pixels wide and high. It’s worth pointing out that sometimes you don’t want to completely clear the animation field every frame. For example, if you were to draw a semi transparent rectangle over the frame at the beginning (instead of clearing it) then you’d end up with a basic ‘bullet time’ style effect.
It's a normal behavior. Once something it's drawn on the canvas, it's there forever. You have to think like if you were painting something: what has been done cannot be undone.
Luckily, you still have solutions:
1) redraw another circle on top of the first one with the background color. It's really not the recommend way, but it still can be useful
2) use clearRect method (see How to clear the canvas for redrawing)
There are numerous ways to clear a canvas pre drawing to create animation:
How to clear the canvas for redrawing
simplest in my mind:
canvas.width=canvas.width;
though can equally use clearRect (which is actually quicker and won't reset the entire canvas if that is an issue regarding transforms etc!) over the region or whole canvas.
Get the likes of:
http://jsfiddle.net/dw17jxee/
I'm working on a script to do several things. In a nutshell, here's what it needs to do:
Read the coordinates from a page and be able to pop up a box within a specific region.
The pop up box needs to be able to follow the mouse around.
I need to be able to modify the box to look however I want (I was thinking a div container that is set to display:hidden, and then the JS sets the display to block when your mouse is in the specified region).
I need to be able to modify it easily (aka, add and subtract objects and coordinate sets)
I was originally using HTML maps (), and that worked great, until I resized my browser, and the div that I had following the mouse no longer lined up correctly. Something about the offset not working correctly, and I couldn't get it to work correctly, so I switched to an HTML canvas.
And now I've got the coordinates in the canvas correctly, I just can't figure out how to get something to pop up when the mouse is inside of a certain section. Here's my current code:
function drawLines(numbers, color){
//poly [x,y, x,y, x,y.....];
var poly=numbers;
context.fillStyle = color;
context.beginPath();
context.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 )
{context.lineTo( poly[item] , poly[item+1] )};
context.closePath();
context.fill();
}
I've got each region inside of an array, which I then pass to the function one by one. The color was a test, and I can easily get each region to show up as a specified color, but that doesn't solve my problem. Any ideas? Thanks!
Seems strange to jump to canvas over a style issue, but ignoring that...
You could bind mousemove events on the canvas element and then do hit tests on your region to see if the mouse is inside the region.
Doing the hit test efficiently might be tricky depending on the number of regions your testing, but it's definitely doable.
The canvas is just like any other block level element, so the same events apply and are bound in the same way.
Here's one example of mouse events interacting with canvas. In this example, the events are bound to the document, but similar ideas apply.
http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/
I'm writing drag & drop functionality in my HTML5 Canvas application and am wondering how to detect if I'm clicking on a shape other than a rectangle or square, in which case I would do something like this inside of my 'mousedown' event handler:
if (evt._x > 13 && evt._x < 202 .... ) {}
I don't see how to easily do something like that with an arc like this:
ctx.arc(25, 25, 20, 0, (Math.PI/180)*360);
I hope that is clear, thank you in advance.
Just use isPointInPath, which checks if a given point is within the current drawing path. If you're drawing multiple shapes to the canvas, than a good technique is to associate each of your shapes with a "hidden" canvas, draw each path to its respective canvas, than test isPointInPath against each of these, offsetting the destination/mouse coordinates as needed. Theres no reason to resort to your own calculations for this.
First you check if the click is within a shape's bounding box (the smallest rectangle which fully encloses the shape). If it is, then you do the more complex math to determine if the click is within the shape itself. You'll have to implement this math yourself as I don't think there's anything built-in for it.
You'll get the formula you need here and also in Polygon article of Wikipedia.
This may sound stupid, but you can use <area> tags inside a <map> over an <img> to create interactive polygonal shapes. They have their own onclicks/mouseovers/etc. already implemented by all browsers.