Home > Developer > Web Develop
Ysm @ iysm.net
Email:[email protected]
Note: refer to http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/to complete this article.
1. Basic structureKineticjsThe first thing to do is to bind tohtml a dom<div > tag. kineticjs Create a stage in this container called the arena ( stagelayercanvas element, For example, a variety of graphics, images, groups of elements (groups can contain other graphics and other groups) and so on. The user can also add event listener methods to the graphs, groups of elements, layers themselves, and the stage itself to respond to events such as mice and keyboards. The browser finally shows the overlay effect of these user layers.
Original image source:http://www.kineticjs.com/how-it-works.php
2. First screenNow we start making our first picture with Kinetic.
The basic flow of the Kinetic drawing can be as follows:
The first is to create a HTML5 page and add a reference to the Kinetic library in
<script src="./kinetic.js"></script>
Add a container in <body> to bind to the Kinetic used to create the stage, for example, it can be a <div>:
<div id="container"></div>
Our Kinetic image will be drawn in this container.
In this example, we are going to create a 600x400 stage and draw a red rectangle in the center position.
Also add a script to the :
<script>
Drawing when a page is loaded
window.onload = function() {
Create Kinetic stage, bind the <div> container We added
var stage = new kinetic.stage ({
Container: "container", //<div> ID
width:600, // Create the stage width
height:400 // created stage height
});
Creating the Kinetic user layer
var layer = new kinetic.layer ();
Create a Kinetic rectangle object
var rect = new kinetic.rect ({
x:200, // rectangle upper left corner x coordinate
y:150, // Rectangle upper-left corner y- coordinate
width:200, // width of rectangle
height:100, // height of rectangle
Fill : "Red", // Rectangle fill Color
Stroke: black, // color of the rectangular edge line
strokewidth:4 // width of rectangular edge lines
});
Add the above rectangle to the user layer
Layer.add (rect);
Add the above user layer to the stage
stage.add (layer);
Stage.draw ();
};
</script>
You can see the following image by opening the page in your browser:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
