学习canvas

基本语法

<canvas width="300" height="300" id="canvas"></canvas>

<script>
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');//获取canvas的2d上下文
	
	//必须先给颜色，再画图，顺序不能错！！！
	ctx.fillStyle = 'red';//填充色
	ctx.fillRect(10, 10, 100, 100);//在(10,10)处画一个100x100的填充矩形(fillRect)

	ctx.strokeStyle = 'red';//描边色
	ctx.strokeRect(50, 50, 100, 100);//描边矩形
</script>

【点击查看代码】

设置画布高度

canvas设置宽高时，由于它是inline元素，所以先要设置display:block或者vertical-align: top;然后修改它的属性宽高，而不是css的宽高

#canvas{
	display: block;
	或者
	vertical-align:
}

var canvas = document.getElementById('canvas');
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
canvas.width = cw;
canvas.height = ch;

画个矩形

ctx.fillStyle = 'red';//填充色
ctx.fillRect(10, 10, 100, 100);//在(10,10)处画一个100x100的填充矩形(fillRect)

ctx.strokeStyle = 'yellow';//描边色
ctx.strokeRect(10, 10, 100, 100);//描边矩形

画个三角形

//画个三角
	ctx.beginPath();//老子要开始画图啦！
    ctx.moveTo(300,240);//先在(300,240)这取个点
    ctx.lineTo(300,300);//连接到(300,300)
    ctx.lineTo(240,270);//连接到(240,270)
    ctx.fill();//填充颜色(默认填充最近的ctx.fillStyle的颜色)

画个圆

Math.PI表示π,弧度=(Math.PI/180)*角度

ctx.arc(x, y, 半径, 起始弧度, 结束弧度, 默认顺时针画/设置true逆时针画);

	ctx.beginPath();//老子要开始画图啦！
	ctx.arc(160, 140, 10,0,2*Math.PI);//在(160,140)的位置，画1个半径为10,起始弧度0，终止弧度为2π的圆，默认顺时针画
	ctx.fill();//填充颜色

画个圆弧边

ctx.beginPath();//老子要开始画图啦！
ctx.arc(190, 170, 50,0,Math.PI/2);//在(160,140)的位置，画1个半径为10,起始弧度0，终止弧度为2π的圆，默认顺时针画
ctx.stroke();//描边

画条线(绘制路径)

function drawLine(x1,y1,x2,y2) {
	ctx.beginPath();
	ctx.lineWidth = 5;
	ctx.moveTo(x1,y1);
	ctx.lineTo(x2,y2);
	ctx.stroke();		
}

橡皮擦

擦除部分内容
ctx.clearRect(50,50,10,10);//在(50,50)这点擦去10x10的矩形【橡皮擦】

清屏
var paper = document.getElementById('canvas');
ctx.clearRect(0,0,paper.width,paper.height);//挖去一个和画布大小一样的矩形【橡皮擦】

保存为图片

	var paper = document.getElementById('canvas');

    a.onclick = function () {
    	var imgUrl = paper.toDataURL("image/png");
    	a.href = imgUrl;
    	a.download = '图片.png';//设置保存时的默认名字
    }
`