HTML5 canvas简单用法

前端学习总结于慕课网

canvas的大小两种方法
1:标签内width=“” height=“”

<canvas id="chess" width="450px" height="450px"></canvas>

2:js定义

var canvasWidth = 800;
var canvasHeight = canvasWidth;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = canvasWidth;
canvas.height = canvasHeight

两个示例的js
1:五子棋

var me = true;
var over = false;
var chessBoard = [];

for (var i = 0; i < 15; i++) {
	chessBoard[i] = [];
	for (var j = 0; j < 15; j++) {
		chessBoard[i][j] = 0;
	}
}

//赢法数组
var wins = [];
for (var i = 0; i < 15; i++) {
	wins[i] = [];
	for (var j = 0; j < 15; j++) {
		wins[i][j] = [];
	}
}
var count = 0;
//所有横线赢法
for (var i = 0; i < 15; i++) {
	for (var j = 0; j < 11; j++) {
		for (var k = 0; k < 5; k++) {
			wins[i][j+k][count]= true;
		}
		count++;
	}
}
//所有竖线赢法
for (var i = 0; i < 15; i++) {
	for (var j = 0; j < 11; j++) {
		for (var k = 0; k < 5; k++) {
			wins[j+k][i][count]= true;
		}
		count++;
	}
}
//所有斜线赢法
for (var i = 0; i < 11; i++) {
	for (var j = 0; j < 11; j++) {
		for (var k = 0; k < 5; k++) {
			wins[i+k][j+k][count]= true;
		}
		count++;
	}
}
//所有反斜线赢法
for (var i = 0; i < 11; i++) {
	for (var j = 14; j > 3; j--) {
		for (var k = 0; k < 5; k++) {
			wins[i+k][j-k][count]= true;
		}
		count++;
	}
}

//赢法的统计数组
var myWin = [];
var computerWin = [];

for (var i = 0; i < count; i++) {
	myWin[i] = 0;
	computerWin[i] = 0;
}

//console.log(count);
var chess = document.getElementById('chess');
var context = chess.getContext('2d');

context.strokeStyle = '#bfbfbf';

var logo = new Image();
logo.src = "images/log2.jpg";
logo.onload = function(){
	context.drawImage(logo,0,0,450,450);
	drawChessBoard();

}

function drawChessBoard(){
	for (var i = 0; i < 15; i++) {
		context.moveTo(15 + i*30,15);
		context.lineTo(15 + i*30,435);
		context.stroke();
		context.moveTo(15,15 + i*30);
		context.lineTo(435,15 + i*30);
		context.stroke();
	}

}

function oneStep(i,j,me){
	context.beginPath();
	context.arc(15 + i*30,15 + j*30,13,0,2*Math.PI);
	context.closePath();
	var gradient = context.createRadialGradient(15 + i*30 +2,15 + i*30 -2,13,15 + i*30 +2,15 + i*30 -2,0);
	if (me) {
		gradient.addColorStop(0,"#0a0a0a");
		gradient.addColorStop(1,"#636766");
	}else{
		gradient.addColorStop(0,"#d1d1d1");
		gradient.addColorStop(1,"#f9f9f9");
	}
	
	context.fillStyle = gradient;
	context.fill();
}



$("#chess").click(function(e){
	if (over) {
		return;
	}
	if (!me) {
		return;
	}
	var x = e.offsetX;
	var y = e.offsetY;
	var i = Math.floor(x/30);
	var j = Math.floor(y/30);
	if (chessBoard[i][j] == 0) {
		oneStep(i,j,me);
		chessBoard[i][j] = 1;
		
		for (var k = 0; k < count; k++) {
			if (wins[i][j][k]) {
				myWin[k]++;
				computerWin[k] = 6;
				if (myWin[k] == 5) {
					alert("你赢了!");
					over = true;
				}
			}
		}
		if (!over) {
			me = !me;
			computerAI();
		}
	}

});

function computerAI(){
	var myScore = [];
	var computerScore = [];
	var max = 0;
	var u = 0, v = 0;
	for (var i = 0; i < 15; i++) {
		myScore[i] = [];
		computerScore[i] = [];
		for (var j = 0; j < 15; j++) {
			myScore[i][j] = 0;
			computerScore[i][j] = 0;
		}
	}

	for (var i = 0; i < 15; i++) {
		for (var j = 0; j < 15; j++) {
			if (chessBoard[i][j] == 0) {
				for (var k = 0; k < count; k++) {
					if (wins[i][j][k]) {
						if (myWin[k] == 1) {
							myScore[i][j] += 200;
						}else if(myWin[k] == 2){
							myScore[i][j] += 400;
						}else if(myWin[k] == 3){
							myScore[i][j] += 2000;
						}else if(myWin[k] == 3){
							myScore[i][j] += 10000;
						}

						if (computerWin[k] == 1) {
							computerScore[i][j] += 220;
						}else if(myWin[k] == 2){
							computerScore[i][j] += 440;
						}else if(myWin[k] == 3){
							computerScore[i][j] += 2200;
						}else if(myWin[k] == 3){
							computerScore[i][j] += 20000;
						}
					}
				}
				if (myScore[i][j] > max) {
					max = myScore[i][j];
					u = i;
					v = j;
				}else if(myScore[i][j] == max){
					if (computerScore[i][j] > computerScore[u][v]) {
						u = i;
						v = j;
					}
				}

				if (computerScore[i][j] > max) {
					max = computerScore[i][j];
					u = i;
					v = j;
				}else if(computerScore[i][j] == max){
					if (myScore[i][j] > myScore[u][v]) {
						u = i;
						v = j;
					}
				}
			}
		}
	}
	oneStep(u,v,false);
	chessBoard[u][v] = 2;
	for (var k = 0; k < count; k++) {
			if (wins[u][v][k]) {
				computerWin[k]++;
				myWin[k] = 6;
				if (computerWin[k] == 5) {
					alert("计算机赢了!");
					over = true;
				}
			}
		}
		if (!over) {
			me = !me;
		}
}

2:写字

var canvasWidth = 800;
var canvasHeight = canvasWidth;

var strokeColor = 'black';
var isMouseDown = false;
var lastLoc = {x:0,y:0};
var lastTimestamp = 0;
var lastLineWidth = -1;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = canvasWidth;
canvas.height = canvasHeight

drawGrid();

$("#clear_btn").click(
	function(e){
		context.clearRect(0,0,canvasWidth,canvasHeight);
		drawGrid();
	}
);

$(".btn").click(
	function(e){
		strokeColor = $(this).css("blackgroud-color");
	}
);

canvas.onmousedown = function(e){
	e.preventDefault();
	isMouseDown = true;
	//console.log('mouse down!');
	lastLoc = windowToCanvas(e.clientX,e.clientY);
	lastTimestamp = new Date().getTime();
	
}
canvas.onmouseup = function(e){
	e.preventDefault();
	isMouseDown = false;
	//console.log('mouse up');
}
canvas.onmouseout = function(e){
	e.preventDefault();
	isMouseDown = false;
	//console.log('mouse out');
}
canvas.onmousemove = function(e){
	e.preventDefault();
	if (isMouseDown) {
		//console.log('mouse move');
		var curLoc = windowToCanvas(e.clientX,e.clientY);
		var curTimestamp = new Date().getTime();
		var s = calcDistance(curLoc,lastLoc);
		var t = curTimestamp - lastTimestamp;

		var lineWidth = calcLineWidth(t,s);


		context.beginPath();
		context.moveTo(lastLoc.x,lastLoc.y);
		context.lineTo(curLoc.x,curLoc.y);


		context.strokeStype = strokeColor;
		context.lineWidth = lineWidth;
		context.lineCap = "round";
		context.lineJoin = "round";
		context.stroke();

		lastLoc = curLoc;
		lastTimestamp = curTimestamp;
		lastLineWidth = lineWidth;
	}
	
}

var amxLineWidth = 30;
var ainLineWidth = 1;
var maxStrokeV = 10;
var minStrokeV = 0.1;

function calcLineWidth(t,s){
	var v = s/t;
	var resultLineWidth;
	if (v<=minStrokeV) {
		resultLineWidth = amxLineWidth;
	}else if (v>=maxStrokeV) {
		resultLineWidth = ainLineWidth;
	}else{
		resultLineWidth = amxLineWidth-(v-minStrokeV)/(maxStrokeV-minStrokeV)*(amxLineWidth-ainLineWidth);
	}
	return lastLineWidth*3/5 + resultLineWidth*2/5;
}

function calcDistance(loc1,loc2){
	return Math.sqrt((loc1.x - loc2.x)*(loc1.x-loc2.x)+(loc1.y-loc2.y)*(loc1.y-loc2.y));
}

function windowToCanvas(x,y){
	var bbox = canvas.getBoundingClientRect();
	return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)}
}


function drawGrid(){

	context.save();
	context.strokeStyle = 'reg(230,11,9)';

	context.beginPath();
	context.moveTo(3,3);
	context.lineTo(canvasWidth - 3 , 3);
	context.lineTo(canvasWidth - 3 , canvasHeight - 3 );
	context.lineTo(3 ,canvasHeight - 3);
	context.closePath();

	context.lineWidth = 6;
	context.stroke();

	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(canvasWidth , canvasHeight);

	context.moveTo(canvasWidth,0);
	context.lineTo(0 , canvasHeight);

	context.moveTo(canvasWidth/2,0);
	context.lineTo(canvasWidth/2 , canvasHeight);

	context.moveTo(0,canvasHeight/2);
	context.lineTo(canvasWidth , canvasHeight/2);

	context.lineWidth = 1;
	context.stroke();

	context.restore();

}