HTML Graphics
HTML
Graphic contents can be added to html page using <svg>
or <canvas>
.
Graphic contents in HTML page.
Without multimedia, images, graphics a web page has just text contents, these are not much attractive to users.
.png
,.jpeg
,.gif
etc are raster or pixel based image, they loose the image quality when scaled up. <img>
can be used to display images.
<svg>
image is a vector image and can be scaled up or down without loosing the image quality. <img>
or <svg>
element is used to display vector image.
<canvas>
is a HTML element and container to draw graphics on HTML page using JavaScript. It draws pixel based graphics on canvas context area. <canvas>
element is used to display image using JavaScript.
Some example of Graphics <svg>
and <canvas>
in HTML
You don't need to worry about how the examples are working.
Example: <svg>
Basic shapes
<svg width="600" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5" />
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5" />
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5" />
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange"
fill="transparent" stroke-width="5" />
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green"
fill="transparent" stroke-width="5" />
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5" />
</svg>
Example: <svg>
rotation
<svg width="600" height="150">
<title>SVG Animate with transform</title>
<rect x="0" y="0" width="600" height="150" stroke="black" stroke-width="1" />
<circle cx="10" cy="40" r="15" fill="red" stroke="black" stroke-width="1">
<animateTransform attributeName="transform" begin="0s" dur="6s" type="rotate" from="0 60 60" to="360 100 60"
repeatCount="indefinite" />
</circle>
</svg>
Example: <svg>
Linear motion
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100">
<title>SVG Animate with Path</title>
<rect x="0" y="0" width="600" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="red" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 600 Z" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
Example: <svg>
graphic motion according to a path
<svg width="600" height="100">
<title>SVG Animate with Path</title>
<rect x="0" y="0" width="600" height="100" stroke="black" stroke-width="1" />
<rect x="0" y="0" width="20" height="20" fill="red" stroke="black" stroke-width="1">
<animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" dur="5s"
repeatCount="indefinite" rotate="auto" />
</rect>
</svg>
Example: <canvas>
Graphic motion
<canvas class="myCanvas">
<p>Canvas not supported by your browser.</p>
</canvas>
<script>
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = 600;
const height = canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0, 0, width, height);
ctx.translate(width / 2, height / 2);
const image = new Image();
image.src = 'walking.png';
image.onload = draw;
let sprite = 0;
let posX = 0;
function draw() {
ctx.fillRect(-(width / 2), -(height / 2), width, height);
ctx.drawImage(image, (sprite * 102), 0, 102, 148, 0 + posX, -74, 102, 148);
if (posX % 13 === 0) {
if (sprite === 5) {
sprite = 0;
} else {
sprite++;
}
}
if (posX > width / 2) {
let newStartPos = -((width / 2) + 102);
posX = Math.ceil(newStartPos);
console.log(posX);
} else {
posX += 2;
}
window.requestAnimationFrame(draw);
}
;
</script>
Example: <canvas>
Graphic Animation
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 600/400, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(600, 400);
document.body.appendChild(renderer.domElement);
let cube;
const loader = new THREE.TextureLoader();
loader.load('box.png', texture => {
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2, 2);
const geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
const material = new THREE.MeshLambertMaterial({map: texture});
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
draw();
});
const light = new THREE.AmbientLight('rgb(255,255,255)'); // soft white light
scene.add(light);
const spotLight = new THREE.SpotLight('rgb(255,255,255)');
spotLight.position.set(100, 1000, 1000);
spotLight.castShadow = true;
scene.add(spotLight);
function draw() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(draw);
}
Click on the "Try Now" button to see how it works.