今天我们来学画布
首先写好画布的样式,我们就来写的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
}
}
这段代码可以实现,希望这边文章对你们有用