canvas是什么?
1.是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.
2.Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。
3.但是需要注意,canvas 元素本身并不绘制图形,它只是相当于一张空画布。
4.如果开发者需要向 canvas 上绘制图形,则必须使用 JavaScript 脚本进行绘制。
canvas能够做什么?
- 基础图形的绘制
- 文字的绘制
- 图形的变形和图片的合成
- 图片和视频的处理
- 动画的实现
- 小游戏的制作
接下来就展示一些用canvas绘制的基础图形:
案例一:绘制五角星
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
box-shadow: 0 0 10px gray;
}
</style>
</head>
<body>
<canvas width="500" height="500"></canvas>
</body>
<script>
// 1.获取canvas标签
var canvas = document.querySelector('canvas');
// 2.获取canvas的上下文环境
var ctx = canvas.getContext('2d'