HTML5 canvas（）的简易运用-CSDN博客

首先，在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>