在HTML5之前，前端无法在HTML页面中动态绘制图形、图片，一般的需要在服务器生成位图后输出到HTML页面，或者使用Flash等。HTML5的出现改变了这种局面，HTML5新增了一个<canvas... />元素，通过这个元素可以获取绘图对象，调用强大的绘制API。
<canvas.../>元素本身并不绘制图形，而是提供一个空白画布，通过Javascript中调用绘制API在这张画布上面绘制。
基本的绘制流程如下：
1.获取<canvas.../>对应的dom对象，这是一个Canvas对象。
2.通过这个Canvas对象获取CanvasRenderingContext2D对象。
3.调用CanvasRenderingContext2D对象的API绘制。
如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas first Demo</title>
</head>
<body>
<canvas id="mc" width="400" height="300" style="border: 1px solid black"></canvas>
<script type="text/javascript">
let canvas = document.getElementById('mc')
let ctx = canvas.getContext('2d')
ctx.fillStyle = '#f00'
ctx.fillRect(20,30,100, 150)
</script>
</body>
</html>
Demo.png
网友评论