首先,在html的布局中,canvas的布局多少有些特殊,若是照惯例在<style></style>中书写大小样式的话,会造成出现图像的长宽比强制成为1:2的样子,所以我们要在canvas之间加入大小样式如下面
<canvas id="canvas" width ="600"height="600">
</canvas>
在这样的基础上,我们才能照常进行我们的下列活动。
接下来我们来进行一下几个基础的运用
1·在画布上用代码画矩形
想要画出一个矩形,我们得先知道下面几种api
方法 | 描述 |
getContext() | 获取绘图环境,可选参数"2d" |
fillRect(x,y,width,height) | 绘制一个填充的矩形 |
strokeRect(x,y,width,height) | 绘制一个矩形的边框 |
clearRect(x,y,width,height) | 清除指定矩形区域。 |
我们试着先制作一个矩形边框
js代码如下
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境
ctx.strokeRect(50,50,100,100)//绘制填充的"黑色"的矩形
</script>
我们再试着进一步,利用for循环加入,同时描绘多个矩形边框
js代码如下:
<script>
var canvas=document.getElementById("canvas")
var ctx=canvas.getContext("2d")
for(var i=1;i<4;i++){
ctx.strokeRect((50)*i,(50)*i,100,100)
}
</script>
在这里我希望大家能自己利用上面的方法做出凹凸的矩形试试。
在canvas内的图形,我们并不能直接使用样式修改,api为我们提供了以下几种方式
方法 | 描述 |
fillStyle | 填充背景颜色 |
strokeStyle | 设置边框颜色 |
lineWidth | 设置边框的宽度 |
注意:在绘制矩形的过程中,必须是绘制样式在绘制图形之前。
2.绘制圆形
绘制圆形,canvas为我们提供了arc这个方法
ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)
该方法有6个参数,x为绘制圆形的起点横坐标,y表示绘制圆形的起点的纵坐标,radius表示圆的半径,startAngle为开始角度,endAngle为结束的角度, anticlockwise是否按照顺时针方向进行绘制。false表示顺时针。(默认为顺时针)。
其中有个弧度转换的公式:degreens*Math.PI/180
列子代码如下
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() //结束(收笔)
3.绘制直线
我们可以使用moveTo()和lineTo()绘制直线,或者是自己想要的图形,不局限于矩形。
方法 | 描述 |
moveTo(x,y) | 不绘制,只是将当前位置移动到新的目标点 |
lineTo(x,y) | 不仅将当前位置移动到新的目标点(x,y),而且在两个坐标之间画一条直线。 |
linejoin | 设置两线段连接处所显示的样子。round,bevel,miter |
lineCap | 线段端点显示的样式 |
save | 保存绘画路径 |
restore | 销毁路径 |
注意:我们使用两个方法的时候,要注意使用closePath()闭合。因为它会通知canvas当前绘制的图形已经闭合或者形成了完全封闭。(linejoin)
4.画布布置
代码如下
<script>
var oC=document.getElementById("canvas")
var ctx=canvas.getContext("2d")
oC.onmousedown=function(e){
var disX=e.clientX-oC.offsetLeft
var disY=e.clientY-oC.offsetTop
ctx.moveTo(disX,disY)
document.onmousemove=function(e){
var disX=e.clientX-oC.offsetLeft
var disY=e.clientY-oC.offsetTop
ctx.lineTo(disX,disY)
ctx.stroke()
}
document.onmouseup=function(){
document.onmousedown=null
document.onmousemove=null
}
}
</script>