这些代码可以让你知道canvas如何使用

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。

    首先建立一个html文件，并插入<canvas>标签：

<canvas id="canvas" width="400" height="600">
	您的浏览器不支持canvas
</canvas>

    接着让我们进入canvas的神奇世界吧！你可以使用外链js文件，也可以跟我一样直接在html文件内插入<script>，首先我们要加入getElementById去获取canvas的控制权

<script type="text/javascript">
    var canvas=document.getElementById("canvas") //第一行
</script>

    接下来我会把自己的一些对canvas操作的js代码贴于此处，你可以直接复制到js第一行下方。其中涉及了大部分的canvas属性，不过有一些不太常用的我就冗述了，当然感兴趣的同学可以前往w3c查看canvas的所有属性。

    使用canvas画矩形，矩形颜色是支持rgba的，可以制作有透明度的矩形

//使用canvas画矩形
if(canvas.getContext){
	var context=canvas.getContext("2d")
	
	context.fillStyle="blue"//颜色填充 "rgba(0,0,255,0.5)"
	context.fillRect(10,10,50,50)

	context.strokeStyle="red"//描边颜色
	context.lineWidth=3//描边宽度
	context.lineCap="round"//控制线条末端的形状是平头、圆头和方头("butt"、"round"、"square")
	context.lineJoin="bevel"//控制线条相交的方式是圆交、斜交还是斜接("round"、"bevel"、"miter")
	context.strokeRect(30,30,50,50)

	context.clearRect(40,40,10,10)//清除canvas内容
}

    使用canvas画线条，注意画线条一定要调用beginPath()方法和结尾调用stroke()方法

//使用canvas画线条
if(canvas.getContext){
	var context=canvas.getContext("2d")

	context.beginPath()//需先调用该方法才能画图
	context.arc(100,100,99,0,2*Math.PI,false)//arc(x,y,radius,startAngle,endAngle,counterclockwise) false默认顺时针
	context.moveTo(194,100)//移动游标，不会画线条出来
	context.arc(100,100,94,0,2*Math.PI,false)
	context.moveTo(100,100)
	context.lineTo(100,15)//从上一个点开始绘制一条直线
	context.moveTo(100,100)
	context.lineTo(35,100)
	context.stroke()//把图形绘制到画布上
}

    

    使用canvas绘制文本，canvas绘制文本有一点不足，就是没有自动换行的属性可选，所以必须自己写代码脚本去控制换行，我在下方贴了自己解决canvas中文换行的一种方法，特别是中文字符的换行较于英文麻烦很多（因为英文间有空格，更容易判断），我用的方法可能比较笨，希望有大牛可以做指导！

//使用canvas绘制文本
if(canvas.getContext){
	var context=canvas.getContext("2d")

	context.font="bold 14px Arial"
	context.textAlign="center"//尽量使用"start"、"end"、"middle"，不要使用"left"、"right"
	context.textBaseline="middle"
	context.fillText("12",100,20)

	var fontSize=100
	context.font=fontSize+"px Arial"
	while(context.measureText("Hello world!").width>200){//measureText() 是为了控制文本大小
		fontSize--;
		context.font=fontSize+"px Arial"
	}
	context.fillText("Hello world!",200,100)
	context.fillText("Font size is "+fontSize+"px",200,150)
}

    中文字符自动换行，我的方法比较傻，强行在中文字符间插入一个空格，因为我不知道为什么怎么测试都不能判断分割两个中文字符，这点可能是自己还钻研不够，也望大家见笑:(

function wrapText(context, text, x, y, maxWidth, lineHeight){
    var words = text.split(" ");
    var line = "";
    for(var n = 0; n < words.length; n++) {
    	var testLine = line + words[n] + " ";
	var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
	if(testWidth > maxWidth) {
	    context.fillText(line, x, y);
	    line = words[n] + " ";
	    y += lineHeight;
	}else {
	    line = testLine;
	}
    }
    context.fillText(line, x, y);
}

var maxWidth = 355;
var lineHeight = 20;
var x = 32;
var y = 508;
var text=document.getElementById("text").value//获取输入框的内容
text=text.replace(/(.{1})/g,"$1 ")//正则在每个字符之间插入空格
canvasCtx.font = "13pt 微软雅黑"
canvasCtx.fillStyle = "#333"
wrapText(canvasCtx, text, x, y, maxWidth, lineHeight)

    canvas变换功能，可以进行旋转、缩放等，现在常用于头像或者图片的上传功能中   

//canvas变换功能
if(canvas.getContext){
	var context=canvas.getContext("2d")

	context.beginPath()
	context.arc(300,100,99,0,2*Math.PI,false)
	context.moveTo(394,100)
	context.arc(300,100,94,0,2*Math.PI,false)
	context.translate(300,100)//变换原点
	context.rotate(2)//如需将角度转换为弧度，使用degrees*Math.PI/180 公式进行计算
	context.moveTo(0,0)
	context.lineTo(0,-85)
	context.moveTo(0,0)
	context.lineTo(-65,0)
	context.stroke()
}

    canvas保存和返回功能，所谓的保存和返回其实就是储存了你的设置参数，返回则是返回上一步的设置参数

//canvas保存和返回功能
if(canvas.getContext){
	var context=canvas.getContext("2d")
	context.fillStyle="red"
	context.save()

	context.fillStyle="blue"
	context.translate(100,100)
	context.save()//保存参数内容

	context.fillStyle="green"
	context.fillRect(0,0,100,200)

	context.restore()//返回上一步参数内容
	context.fillRect(10,10,100,200)

	context.restore()
	context.fillRect(0,0,100,200)
}

    canvas绘制图像，即为把图片显示出来，特别是现在微信长按图片识别二维码流行，很多微信营销活动都会使用到这个方法，因为可以把个人的临时二维码打印在已经准备好的图片上。

//canvas绘制图像
if(canvas.getContext){
	var context=canvas.getContext("2d")
	var image=new Image()//定义image变量储存图片信息
	image.src="img.jpg"
	image.onload=function(){//必须要onload才能显示图片
		context.globalAlpha=0.5//全局透明度
		context.drawImage(image,100,0,100,400,0,0,200,200)//drawImage(要绘制的图像、源图像的x坐标、源图像的y坐标、源图像要显示的宽度、源图像要显示的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度)
	}
}

    canvas绘制阴影、渐变，这都是canvas本身具有的一些好玩的地方，这就可以让我们有了更多的选择了，也让canvas更好的去还原一些设计，为画面增加更多的效果

//canvas绘制阴影、渐变
if(canvas.getContext){
	var context=canvas.getContext("2d")

	context.shadowOffsetX=5
	context.shadowOffsetY=5
	context.shadowBlur=4
	context.shadowColor="rgba(0,0,0,0.5)"

	context.fillStyle="red"
	context.fillRect(10,10,50,50)

	context.fillStyle="rgba(0,255,0,1)"
	context.fillRect(30,30,50,50)
	
	context.globalCompositeOperation="destination-over"//后绘制的图形怎么与先绘制的图形结合，具体属性值参考下图

	//线性渐变
	var gradient=context.createLinearGradient(50,50,75,75)//createLinearGradient(起点x坐标、起点y坐标、终点x坐标、终点y坐标)
	gradient.addColorStop(0,"white")
	gradient.addColorStop(1,"black")
	context.fillStyle=gradient
	context.fillRect(50,50,50,50)

	//径向渐变
	var gradient=context.createRadialGradient(95,95,10,95,95,50)//createRadialGradient(起点原点x坐标、起点原点y坐标、起点原点半径、终点原点x坐标、终点原点y坐标、终点原点半径)
	gradient.addColorStop(0,"white")
	gradient.addColorStop(1,"black")
	context.fillStyle=gradient
	context.fillRect(70,70,50,50)
}

    导出canvas上绘制的图像。这个功能很重要，因为你直接在canvas操作生成的图像还不算是一张图片，因为直接元素在上面按照你的设置进行排版而已，而要生成可保存的图片，就必须使用这个toDataURL()方法

//导出canvas上绘制的图像，生成可保存图像
if(canvas.getContext){
	var imgURI=canvas.toDataURL("image/png")//"image/jpeg"
	var image=document.createElement("img")
	image.src=imgURI
	document.body.appendChild(image)
}

    至此就是本博客提及的canvas一些常用的方法，如果你觉得这篇文章还不错，请为我点个赞，如果文章有任何的错误，也希望你可以在留言区评价给我！