The canvas element is part of HTML 5 and allows
for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low
level, procedural model that updates a bitmap and does not have a built-in scene
graph.
In the following code we drag and drop the
circle in the clipping region. Before giving the code I want to discuss some
terms I use in this code.
window.onload
Some scripts require that you run something
immediately after the web page finishes loading. The normal way to do this is to
add an onload attribute to the body tag.
Summary
An event handler for the load
event of a window .
Syntax
window.onload = functionRef ()
functionRef
is the handler function to be called when the window's load
event fires.
AddEventListener
Despite that it's already outdated,
a lot of programmers are still using onClick, onChange and so … events in the
tags attributes and I actually find myself doing it sometimes as well. So I want
to show you a nice and clean way of adding events to the objects/tags without
implicitly declaring some action in the tag – sounds complicated but it's really
not.
Summary
addEventListener() registers a
single event listener on a single target. The event target may be a single node
in a document, the document itself, a window, or an XMLHttpRequest.
To register more than one
event listeners for the target use addEventListener()
for the same target but with different event types or capture parameters.
Syntax
target.addEventListener(type,
listener, useCapture Optional );
target.addEventListener(type, listener, useCapture Optional [, aWantsUntrusted
Non-standard ] ); // Mozilla only
where
type
A string representing the
event type to listen for.
listener
The object that receives a
notification when an event of the specified type occurs. This must be an object
implementing the EventListener interface, or simply a JavaScript function.
useCapture [optional]
If true, useCapture indicates
that the user wishes to initiate capture. After initiating capture, all events
of the specified type will be dispatched to the registered listener before being
dispatched to any EventTargets beneath it in the DOM tree. Events which are
bubbling upward through the tree will not trigger a listener designated to use
capture. See DOM Level 3 Events for a detailed explanation. Note that this
parameter is not optional in all browser versions. If not specified, useCapture
is false.
aWantsUntrusted
Non-standard
If true,
the event can be triggered by untrusted content.
code
<html>
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.3.0.js">
</script>
<script>
window.onload = function () {
var stage =
new Kinetic.Stage("container", 378,
200);
var draggingShape = undefined;
var draggingRectOffsetX = 0;
var draggingRectOffsetY = 0;
// box
var box =
new Kinetic.Shape(function
() {
var context =
this.getContext();
context.beginPath();
context.rect(box._x, box._y, 800, 600);
context.fillStyle = "#ddd";
context.fill();
context.closePath();
});
box.addEventListener("mousedown",
function () {
draggingShape = box;
var mousePos = stage.getMousePos();
draggingRectOffsetX = mousePos.x - box._x;
draggingRectOffsetY = mousePos.y - box._y;
});
box.addEventListener("mouseover",
function () {
document.body.style.cursor =
"pointer";
});
box.addEventListener("mouseout",
function () {
document.body.style.cursor =
"default";
});
box._x = 100;
box._y = 50;
stage.add(box);
// circle
var circle =
new Kinetic.Shape(function
() {
var context =
this.getContext();
// draw clipping rectangle
context.beginPath();
context.rect(box._x, box._y, 300, 200);
context.clip();
// draw circle
context.beginPath();
context.arc(circle._x, circle._y, 70, 0, 2 * Math.PI,
false);
context.fillStyle = "red";
context.fill();
context.closePath();
});
circle.addEventListener("mousedown",
function () {
draggingShape = circle;
var mousePos = stage.getMousePos();
draggingRectOffsetX = mousePos.x - circle._x;
draggingRectOffsetY = mousePos.y - circle._y;
});
circle.addEventListener("mouseover",
function () {
document.body.style.cursor =
"pointer";
});
circle.addEventListener("mouseout",
function () {
document.body.style.cursor =
"default";
});
stage.add(circle);
circle._x = 300;
circle._y = 50;
stage.draw();
stage.addEventListener("mouseout",
function () {
draggingShape = undefined;
}, false);
stage.addEventListener("mousemove",
function () {
var mousePos = stage.getMousePos();
if (draggingShape) {
draggingShape._x = mousePos.x - draggingRectOffsetX;
draggingShape._y = mousePos.y - draggingRectOffsetY;
stage.draw();
}
}, false);
stage.addEventListener("mouseup",
function () {
draggingShape = undefined;
});
};
</script>
</head>
<body onmousedown="return
false;">
<div id="container">
</div>
</body>
</html>
Output
