- 创建一个画布(Canvas)
- 一个画布在网页中是一个矩形框,通过 元素来绘制. 其主要效果考JS脚本实现。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/06f078e1ab85f2e4bc853da21a341ae0.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8bc07a98918730e3f417a7f8439d4368.png)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas-网页涂鸦板</title>
</head>
<body>
<center>
<canvas id="canvsElem" width="900" height="600" style="border: 1px solid rgb(0, 0, 0);">
</canvas>
</center>
<script type="text/javascript">
(function(){
var canvans = document.getElementById('canvsElem');
var context = canvans.getContext('2d');
canvans.width = 900;
canvans.height = 600;
canvans.style.border = "1px solid #000";
canvans.onmousedown = function(e) {
var x = e.clientX - canvans.getBoundingClientRect().left;
var y = e.clientY - canvans.getBoundingClientRect().top;
context.beginPath();
context.moveTo(x,y);
canvans.onmousemove = function(event) {
var x = event.clientX-
canvans.getBoundingClientRect().left;
var y = event.clientY- canvans.getBoundingClientRect().top;
context.lineTo(x,y);
context.stroke();
};
canvans.onmouseup = function(event){
canvans.onmousemove = null;
};
};
} ());
</script>
</body>
</html>