Canvas是什么？
Canvas就是可以用来进行图像绘制的HTML5标签。有了Canvas你就可以用JavaScript在网页上进行图像绘制了。
sample1绘制一个矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#example{
width: 400px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<canvas id="example">
</canvas>
</body>
<script>
//draw a Rectangle.js
function drawRect(){
//Dom获取canvas
let canvasDIV=document.getElementById("example")
if(!canvasDIV){
console.log("This canvas not Found!")
return
}
//获取绘制二维图形的绘图上下文
let ctx=canvasDIV.getContext("2d")
//绘制蓝色图形
ctx.fillStyle='rgba(0,0,255,1.0)'
ctx.fillRect(120,10,100,100) //使用填充颜色填充矩阵，前面两个数字代表矩阵在canvas的左上角坐标。后两个代表长和宽，单位为像素
}
drawRect()
</script>
</html>
