震惊！我们老师居然让我们做这个...

今天我们来学画布

首先写好画布的样式，我们就来写的500*500的画布吧

body{width: 100%;height: 100%;background: black;}
canvas{background: #fff;}
			

<canvas id="canvas" width="500" height="500">
			你的浏览不支持
		</canvas>

然后我们保存后打开，会看到一块白色的画布

接着我们获取画布属性

var oC=document.getElementById("canvas")
var oGC=oC.getContext("2d")//获取绘图环境，可选参数"2d"

首先绘制矩形的方法有2种

一.fillRect(x,y,width,height)   填充的矩形

二.strokeRect(x,y,width,height)  只有边框的矩形

X和Y是表示在画布的坐标，而width和height就是表示矩形的宽高。

列个例子

var oC=document.getElementById("canvas")
var oGC=oC.getContext("2d")
oGC.fillRect(50,50,100,100)
oGC.strokeRect(170.5,50.5,100,100)

在画布上，我们还可以修改矩形内的颜色，和边框颜色还有边框的大小，还能清除部分矩形区域

fillStyle（填充背景颜色），strokeStyle（设置边框颜色），lineWidth（设置边框的宽度），clearRect(x,y,width,height)  清除指定矩形区域。

前三个大家应该基本属性，我就拿最后一个来做例子

var oC=document.getElementById("canvas")
var oGC=oC.getContext("2d")

oGC.fillRect(50,50,100,100)
oGC.clearRect(50,50,50,50)//这部分在x为50和y为50的地方做一个50*50个矩形，而清掉有矩形的区域

如图

矩形的基本就这么多，下面说一下圆形的

圆形的和矩形基本相同就是多了一个公式

//弧度转换的公式：degreens*Math.PI/180
var oC=document.getElementById("canvas")
var oGC=oC.getContext("2d")
oGC.arc(200,200,100,0,360*Math.PI/180,false)
oGC.stroke()//oGC.fill()为填充
oGC.closePath()

在矩形上做一下修改，如图显示

 如果要在画圆必须有(beginPath)，这个为了不连接上一个圆，如果不加会有条连接的线段如这样

 如果加上(beginPath)就不会了

var oC=document.getElementById("canvas")
var oGC=oC.getContext("2d")
oGC.arc(200,200,100,0,360*Math.PI/180,false)
oGC.stroke()
oGC.beginPath()
oGC.arc(160,160,20,0,360*Math.PI/180,false)
oGC.stroke()
oGC.closePath()

 到这里我们就画一个笑脸吧

var oC=document.getElementById("canvas")
var oGC=oC.getContext("2d")
oGC.fillStyle="yellow"
oGC.arc(200,200,100,0,360*Math.PI/180,false)
oGC.fill()
oGC.beginPath()
oGC.fillStyle="black"
oGC.arc(160,160,20,0,360*Math.PI/180,false)
oGC.fill()
oGC.beginPath()
oGC.fillStyle="black"
oGC.arc(240,160,20,0,360*Math.PI/180,false)
oGC.fill()
oGC.beginPath()
oGC.arc(200,240,40,0,180*Math.PI/180,false)
oGC.stroke()40,0,180*Math.PI/180,false)
oGC.stroke()	
oGC.closePath()

最后的180是一个半圆，做为一个嘴巴，而一开始大圆的oGC.stroke()改为的oGC.fill()是为了可以填充颜色

oGC.fillStyle="yellow"我们就以黄色来填充，眼睛为黑色来填充，效果如图

大家都应该玩过你画我猜，如果没有也用过画图工具

var oC=document.getElementById("canvas")
			var oGC=oC.getContext("2d")
			
			oC.onmousedown=function(e){
				var disX=e.clientX-oC.offsetLeft
				var disY=e.clientY-oC.offsetTop
				
				oGC.moveTo(disX,disY)
				document.onmousemove=function(e){
					var disX=e.clientX-oC.offsetLeft
					var disY=e.clientY-oC.offsetTop
					oGC.lineTo(disX,disY)
					oGC.stroke()
					
					
				}
				document.onmouseup=function(){
					document.onmousedown=null
					document.onmousemove=null
				}
				
				
			}

这段代码可以实现，希望这边文章对你们有用