<canvas>
作用:在页面中设定一个区域,然后通过JavaScript动态在这个区域中绘制图片
基本用法:
1、要使用canvas元素标签,一定要设置width和height
2、也可以通过CSS对他的样式进行修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas基本用法</title>
<style type="text/css">
#drawing{
background-color: red;
}
</style>
</head>
<body>
<canvas id="drawing" width="450" height="450">A drawing og something</canvas>
</body>
</html>
3、getContext()方法一定要在canvas的后面出现,不能在canvas前面出现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas基本用法</title>
<style type="text/css">
#drawing{
background-color: red;
}
</style>
</head>
<body>
<canvas id="drawing" width="450" height="450">A drawing og something</canvas>
<script type="text/javascript">
var drawing = document.getElementById("drawing")
if(drawing.getContext){
var context = drawing.getContext("2d")
console.log(context)
}
</script>
</body>
</html>