Core HTML
Lesson 12: Graphics
Overview
In this HTML lesson, we demonstrate the three different ways that we can display graphics in HTML. The first, CSS, is mainly a method for styling HTML elements, but it has grown dramatically in its capabilities. The second, SVG, is well-established in HTML and provides comprehensive methods for creating a wide variety of graphics. The third, the canvas, is the newest way to create graphics and gives us the means to create truly high-performance renderings of complex scenes.
Simple CSS Styling
Our first example demonstrate how to create basic CSS styling for an HTML element. Here, we use a style element to encapsulate our style designation. The style element is an alternative to the style attribute that we have used before. This style element is used to style the p or paragraph element below it that contains text. With this styling, we set the size of the p element box and padding, the color of the text and background, and appearance of the border.
Example1.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
#idWisdom4 {
width: 250px;
height: 200px;
padding: 15px;
color: DarkOliveGreen;
background-color: ivory;
border:10px ridge burlywood;
}
</style>
</head>
<body>
<p id="idWisdom4">Better than this is childlessness with virtue,
for in the memory of virtue is immortality,
because it is known both by God and by men.
When it is present, men imitate it,
and they long for it when it has gone;
throughout all time it marches crowned in triumph,
victor in the contest for prizes that are undefiled.</p>
</body>
</html>Output
CSS Gradients
In our second example, we add a radial gradient to the background of the paragraph element. Gradients offer a wide variety of styles and, in this case, we have made our gradient look like a rainbow.
Example2.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
#idNoah {
width: 700px;
height: 500px;
padding: 15px;
color: GhostWhite;
border:20px ridge Peru;
background-color: DeepSkyBlue;
background-image: radial-gradient(circle farthest-side at 50% 120%,
transparent, transparent, transparent, transparent,
transparent, transparent, transparent, transparent,
transparent, transparent, transparent, transparent,
transparent, transparent, transparent, transparent,
violet, blueviolet, blue, lime, yellow, orange, red,
transparent, transparent, transparent, transparent,
transparent, transparent, transparent, transparent);
}
</style>
</head>
<body>
<p id="idNoah">And God said, "This is the sign of the covenant which I
make between me and you and every living creature that is with you, for all
future generations: I set my bow in the cloud, and it shall be a sign of
the covenant between me and the earth. When I bring clouds over the earth
and the bow is seen in the clouds, I will remember my covenant which is
between me and you and every living creature of all flesh; and the waters
shall never again become a flood to destroy all flesh. When the bow is in
the clouds, I will look upon it and remember the everlasting covenant
between God and every living creature of all flesh that is upon the earth."
God said to Noah, "This is the sign of the covenant which I have established
between me and all flesh that is upon the earth."</p>
</body>
</html>Output
CSS Animations
In addition to wide variety of styling methods, CSS also allows for animation. In this example, we create an animated ball that bounces around the screen. This code contains no JavaScript or any other methods for creating animations, simply CSS.
Example3.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
#idBounce {
width:50px;
height:50px;
background-color:Coral;
position:relative;
border-radius:25px;
animation: kfMoveUp cubic-bezier(.6, 0, 1, .8) .87s infinite alternate,
kfMoveLeft linear 2s infinite alternate;
}
@keyframes kfMoveUp {
from {top: 0px;}
to {top: 350px;}
}
@keyframes kfMoveLeft {
from {left: 0px;}
to {left: 550px;}
}
</style>
</head>
<body>
<div style="border:1px solid black;width:600px;height:400px;background-color:Khaki;">
<h1 style="position: absolute; font: normal small-caps bold normal 185px/200px
Stencil Std;">Bounce</h1>
<div id="idBounce"></div>
</div>
</body>
</html>Output
Shapes in SVG
SVG stands for Scalable Vector Graphics and allows for the creation of many basic shapes via geometric primitives. These primitives include ellipses, circles, rectangles, and polygons, which we illustrate in the example code below.
Example4.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="550" height="350">
<g transform="translate(10,10)">
<g transform="translate(125,125)">
<path d="M 866 500 0 -1000 -866 500 Z
M 866 -500 0 1000 -866 -500 Z" transform="scale(.125)" fill-rule="evenodd"
fill="black" stroke="crimson" stroke-width="30"/>
</g>
<g transform="translate(375,125)">
<circle cx="0" cy="0" r="1000" transform="scale(.125)" fill="yellow"
stroke="violet" stroke-width="20"/>
</g>
<g transform="translate(125,400)">
<rect x="-900" y="-1000" width="1800" height="500"
transform="scale(.125)" fill="Chartreuse" stroke="gray" stroke-width="40"/>
</g>
<g transform="translate(375,300)">
<ellipse cx="0" cy="0" rx="900" ry="250"
transform="scale(.125)" fill="orange" stroke="blue" stroke-width="100"/>
</g>
</g>
</svg>
</body>
</html>Output
Complex Graphics in SVG
In addition to basic geomtric primitive, SVG can perform a myriad of image processing and image editting operations. A few of these are shown in the code below. Svg can also create paths to form objects, as we do with horizontal and vertical paths that are used to create the cross in the middle. Paths in SVG can be very complex. The smooth curves that we have made, also have text running along them. The second curve even animates this text.
Example5.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="550">
<defs>
<mask id="idMask">
<circle id="outer" cx="100" cy="100" r="75" fill="white"/>
<circle id="inner" cx="100" cy="100" r="25" fill="black"/>
</mask>
</defs>
<image href="LastJudgment.png" mask="url(#idMask)"></image>
<path d="M175,25 H225 V175 H375 V225 H225 V525 H175 V225 H25 V175
H175 Z" fill="SaddleBrown" stroke="none" stroke-width="5"/>
<filter id="idImageFilter">
<feImage href="Christ.png" result="imgImage"/>
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="imgBlur" />
<feComposite in="imgImage" in2="imgBlur" operator="in" result="imgComp"/>
</filter>
<g style="filter: url(#idImageFilter)" transform="translate(220, 20)">
<circle cx="100" cy="100" r="85" transform="scale(.8)" fill="yellow"
stroke="none" stroke-width="10"></circle>
</g>
<path id="idCubic" d="M10,200 C75,0 150,0 80,175 S200,250 120,150"
transform="translate(30, 220)" fill="none" stroke="#EA2222" stroke-width="1"/>
<text>
<textPath href="#idCubic">
Who would believe what we have heard? To whom has the arm of the Lord been revealed?
</textPath>
</text>
<path id="idEllipse" transform="translate(230, 180)"
d="M10,200 A65,130 0 1,1 140,200 A65,130 0 1,1 10,200 A65,130 0 1,1 140,200"
fill="none" stroke="none" stroke-width="1"/>
<text>
<textPath href="#idEllipse">
Surely he has borne our griefs
<animate attributeName="startOffset" attributeType="XML" begin="0s" dur="10s"
from="66.6%" to="0%" repeatCount="indefinite" fill="freeze" />
</textPath>
</text>
</svg>
</body>
</html>Output
The Canvas
Our last example demonstrates some of the basic geometic features of the canvas: rectangles, paths, shadows, and text. The canvas requires JavaScript programming to function, but it is capable of doing almost everything that we can do in SVG and it renders very quickly.
Example6.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net - Canvas</title>
</head>
<body>
<canvas id="idCanvas" width="640" height="480"
style="border:4px solid #665544;background-color:Beige">
</canvas>
<script>
var qCanvas = document.getElementById("idCanvas");
var qContext = qCanvas.getContext("2d");
qContext.fillStyle = "lightgray";
qContext.fillRect(320, 240, 200, 170);
qContext.font = '40px helvetica, arial';
qContext.fillStyle = "red";
qContext.fillText('XoaX.net', 340, 340);
qContext.strokeStyle = "#aa5544";
qContext.lineWidth = 10;
qContext.fillStyle = "#aacc88";
qContext.beginPath();
qContext.arc(170, 180, 120, 0, 2*Math.PI);
qContext.closePath();
qContext.fill();
qContext.stroke();
qContext.shadowBlur = 6;
qContext.shadowOffsetX = 3;
qContext.shadowOffsetY = 3;
qContext.shadowColor = "black";
qContext.strokeStyle = "CornflowerBlue";
qContext.lineWidth = 5;
qContext.beginPath();
qContext.moveTo(20,450);
qContext.bezierCurveTo(400, 400, 200, 100, 600, 20);
qContext.stroke();
</script>
</body>
</html>Output
© 2007–2024 XoaX.net LLC. All rights reserved.