- Web Developer's Reference Guide
- Joshua Johanan Talha Khan Ricardo Zea
- 318字
- 2021-07-09 20:18:21
Drawing elements
In previous versions of HTML, if you wanted a graphic or image, you had to create it in another application and use the img
element to pull it into your document. HTML5 has brought some new elements and features to replace the old elements that allow you to draw your own images in the browser.
canvas
The syntax of the canvas
element is as follows:
<canvas height width></canvas>
Attributes
The attributes that are used in the canvas
element are as follows:
height
: This is an attribute to set the heightwidth
: This is an attribute to set the width
Description
The canvas
element is used for drawing. You can use JavaScript to draw lines, shapes, and images; pull frames from videos; and use WebGL, to name just a few features. The HTML element is just the canvas (aptly named!) that you use to make a drawing. All of the interaction happens in JavaScript.
Here is an example of a small canvas
element:
<canvas height="400" width="400"> Your browser does not support the canvas element. </canvas>
svg
The svg
element is the Scalable Vector Graphics (SVG) element:
<svg height viewbox width ></svg>
Attributes
The attributes that are used in the svg
element are as follows:
height
: This is the attribute that sets the height.viewbox
: This sets the bounds for the element. It takes four numbers that map tomin-x
,min-y
,width
, andheight
.width
: This is the attribute that sets the width.
Description
SVG is not a true HTML element. It is its own specification with many elements and attributes. There are books written entirely about SVG. This element is here because you can now create inline SVG in an HTML document. This gives you a lot of flexibility with two-dimensional drawings that images do not give you.
Here is an example that demonstrates the difference between height, width, and viewport. The viewport takes up the bounds of the element, and height and width give the element its size:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="" width="200" height="100" viewBox="0 0 400 200"> <rect x="0" y="0" width="400" height="200" fill="yellow" stroke="black" stroke-width="3" /> </svg>
- Scala Design Patterns
- x86匯編語言:從實(shí)模式到保護(hù)模式(第2版)
- Learn Scala Programming
- Access 2016數(shù)據(jù)庫(kù)管
- Java面向?qū)ο蟪绦蛟O(shè)計(jì)
- Getting Started with React Native
- Python+Tableau數(shù)據(jù)可視化之美
- 深入淺出Go語言編程
- Distributed Computing in Java 9
- PHP+MySQL Web應(yīng)用開發(fā)教程
- R語言實(shí)戰(zhàn)(第2版)
- Flutter從0基礎(chǔ)到App上線
- Swift 2 Blueprints
- Natural Language Processing with Python Cookbook
- Web前端開發(fā)全程實(shí)戰(zhàn):HTML5+CSS3+JavaScript+jQuery+Bootstrap