有趣好玩的canvas

首先我们来了解一下canvas

canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。

 但绘制图形，并不是指使用鼠标作画，而是需要javascript进行配合。创建canvas的时候，他默认的宽高为300px*150px。

<canvas id="canvas">我是一个画布</canvas>

我们在HTML页面中直接插入canvas标签，也可以对它设置宽度和高度，切记设置canvas的时候不可以利用css样式进行设置。

<canvas id="canvas" width="400" height="300">我是一个画布</canvas>

我画你猜制作（简单）

这个很简单，运用了一点点拖拽的原理

首先我们把canvas写好

<canvas id="canvas" width="400" height="400">
	我是一个画布
</canvas>

然后把样式也稍微写一点点

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

接下来写逻辑

        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
	}
				
}

效果如下

小人制作

画小人也很简单，只要算好起始点和终点就可以了

扫描二维码关注公众号，回复： 3277019 查看本文章

var canvas = document.getElementById("canvas")
			var ctx = canvas.getContext("2d")
			ctx.beginPath()
			//笑脸
			ctx.arc(100,100,50,0,360*Math.PI/180,false)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.arc(80,90,10,0,180*Math.PI/180,true)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.arc(120,90,10,0,180*Math.PI/180,true)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.arc(100,100,30,0,180*Math.PI/180,false)
			ctx.stroke()
			ctx.closePath()
			//身
			ctx.beginPath()                //下笔
			ctx.moveTo(100,150)        //起始坐标
			ctx.lineTo(100,250)        //终点坐标
			ctx.stroke()                //实线
			ctx.closePath()                //抬笔
			
			ctx.beginPath()
			ctx.moveTo(100,180)
			ctx.lineTo(50,240)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.moveTo(100,180)
			ctx.lineTo(150,240)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.moveTo(100,250)
			ctx.lineTo(50,340)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.moveTo(100,250)
			ctx.lineTo(150,340)
			ctx.stroke()
			ctx.closePath()
			
			
			
			//第二个
			ctx.beginPath()
			ctx.arc(300,100,50,0,360*Math.PI/180,false)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.arc(280,90,10,0,180*Math.PI/180,true)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.arc(320,90,10,0,180*Math.PI/180,true)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.arc(300,100,30,0,180*Math.PI/180,false)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.moveTo(300,150)
			ctx.lineTo(300,250)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.moveTo(300,180)
			ctx.lineTo(250,240)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.moveTo(300,180)
			ctx.lineTo(350,240)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.moveTo(300,250)
			ctx.lineTo(250,340)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.moveTo(300,250)
			ctx.lineTo(350,340)
			ctx.stroke()
			ctx.closePath()
			
			//心			
			ctx.beginPath()
			ctx.strokeStyle = "red"
			ctx.arc(180,200,20,0,180*Math.PI/180,true)
			ctx.stroke()
			ctx.closePath()                                    
			
			ctx.beginPath()
			ctx.strokeStyle = "red"
			ctx.arc(220,200,20,0,180*Math.PI/180,true)        //两个半圆
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.strokeStyle = "red"
			ctx.moveTo(160,200)
			ctx.lineTo(200,250)
			ctx.stroke()
			ctx.closePath()
			
			ctx.beginPath()
			ctx.strokeStyle = "red"
			ctx.moveTo(240,200)
			ctx.lineTo(200,250)
			ctx.stroke()
			ctx.closePath()

写的时候注意写ctx.beginPath()和ctx.closePath()，就是下笔和抬笔，不然图形会连在一起

完成效果如下：

这只是canvas简单的玩法，发挥想象力还能做出跟多好玩有趣的东西。