首先我们要知道什么是canvas?
- canvas是HTML5提供的一种新标签
- HTML5 标签元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。
- 标签只是图形容器,必须使用脚本来绘制图形。
Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。—其默认在页面上得的大小是width:300px; height:100px;
canvas标签使用JavaScript在网页上绘制图像,本身不具备绘图功能。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
其次canvas主要应用的领域
- 游戏:canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛。
- 可视化数据.数据图表话。
- banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。
下面我们就直接开始,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" context="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" context="ie=edge">
<title></title>
</head>
<body>
<canvas id="canvas" width="400" height=