首先我们来了解一下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
}
}
效果如下
小人制作
画小人也很简单,只要算好起始点和终点就可以了
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简单的玩法,发挥想象力还能做出跟多好玩有趣的东西。