Course Schedule

HTML Graphics

• HTML Graphics

HTML Drawing

• Graphics
• Canvas
• Plotly.js
• Chart.js
• Google
• D3.js

Google Maps

• Maps Introduction
• Maps Basics
• Maps Overlay Layers
• Maps Events
• Maps Controls
• Maps Types
• Maps Reference Manual

SVG Tutorial

• SVG Introduction
• SVG Embed HTML
• SVG Rectangle
• SVG Circle
• SVG Ellipse
• SVG Line
• SVG Polygon
• SVG Line
• SVG Path
• SVG Text
• SVG Stroke
• SVG Filters
• SVG Blur
• SVG Shadows
• SVG Linear Gradients
• SVG Radial Gradients
• SVG Examples
• Reference Manual for SVG

Canvas Tutorial

• Canvas Introduction
• Canvas Drawing
• Canvas Coordinate
• Canvas Line
• Canvas Shape
• Canvas Rectangle
• Canvas Circle
• Canvas Curve
• Canvas Gradient
• Canvas Text
• Canvas Image

Canvas Clock

• Clock Introduction
• Clock Face
• Clock Numbers
• Clock Pointer
• Clock Start

HTML Game

• Game Introduction
• Game Canvas
• Game Components
• Game Controllers
• Game Obstacles
• Game Scores
• Game Images
• Game Sounds
• Game Gravity
• Game Bounce
• Game Rotation
• Game Movement

Elective Courses

Course Recommendations:

• CodeW3C.com Treasure Box

Graphics library

JavaScript library for artificial intelligence graphics and other charts:

• Plotly.js
• Chart.js
• Google Chart

Plotly.js

Plotly.js is a chart library with more than 40 chart types, 3D charts, statistical charts, and SVG maps.

Further Learning ...

Chart.js

Chart.js comes with many built-in chart types:

• Scatter (散点图)
• Line (折线图)
• Bar (柱状图)
• Radar (雷达图)
• Pie, Doughnut (饼图和环形图)
• Polar Area (极地图)
• Bubble (气泡图)

Further Learning ...

Google Chart

From simple line charts to complex tree diagrams, Google Chart offers a variety of built-in chart types:

• Scatter Chart (散点图)
• Line Chart (折线图)
• Bar / Column Chart (条形/柱状图)
• Area Chart (面积图)
• Pie Chart (饼图)
• Donut Chart (甜甜圈图)
• Org Chart (组织结构图)
• Map / Geo Chart (地图/地理图表)

Further Learning ...

Toolbox

Canvas API

Sponsor Links