个人练习小览---canvas学习

最新推荐文章于 2024-04-17 07:03:23 发布

Finca_huang

最新推荐文章于 2024-04-17 07:03:23 发布

阅读量391

点赞数

分类专栏：个人练习文章标签： html camvas

本文链接：https://blog.csdn.net/qq_35281096/article/details/81042810

版权

个人练习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

最开始学习canvas是为了在网页有一个酷炫的背景，当时看到心里就说，哇，这简直太酷炫了。但是canvas我学习一点之后发现是制作游戏的，敲了一段时间，大概是在2017年11月一直断断续续学习到2018年的2月份，最后制作了一个demo就没有继续学习了，因为最后发现这个学再久也不如在借鉴网友的代码去修改来理解得快，说我浮躁也好，基本语法会了之后就是将创意实现的过程，我暂时没有后者的实力，只能老老实实看看书和别人的代码。

最开始的canvas

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>我的第一个canvas</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
	window.addEventListener("load",eventWindowLoaded,false);

	var Debugger = function (){};
	Debugger.log = function(message){
		try{
			console.log(message);
		}catch(exception){
			return;
		}
	}

	function eventWindowLoaded(){
		canvasApp();
	}

	function canvasSupport(){
		return Modernizr.canvas;
	}

	function canvasApp (){
		if(!canvasSupport()){
			return;
		}

		var theCanvas = document.getElementById("canvasOne");
		var context = theCanvas.getContext("2d");

		Debugger.log("Drawing Canvas");

		function drawScreen(){
			//背景
			context.fillStyle = "#ffffaa";
			context.fillRect(0,0,500,300);
			//文字
			context.fillStyle="#000000";
			context.font="20px Sans-Serif";
			context.textBaseline="top";
			context.fillText("Hello World!看不见字",195,80);

			/*//图像
			var helloWorldImage = new Image();
			helloWorldImage.onload = function(){
				context.drawImage(helloWorldImage,155,100);
			}
			helloWorldImage.src ="helloworld.png";*/

			//边框
			context.strokeStyle = "#000000";
			context.strokeRect(5,5,490,290);
		}
		drawScreen();
	}
</script>
</head>
<body>
	<div style="position: absolute;top: 50px;left: 50px">
		<canvas id="canvasOne" width="800" height="500">
			your liar!
		</canvas>
	</div>
</body>
</html>

再进阶一点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>绘制文字</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
	window.addEventListener("load",eventWindowLoaded,false);

	function eventWindowLoaded(){
		canvasApp();
	}

	function canvasSupport(){
		return Modernizr.canvas;
	}
	function canvasApp(){
		if(!canvasSupport()){
			return;
		}

	var theCanvas = document.getElementById("canvasOne");
	var context = theCanvas.getContext("2d");

	 function drawScreen(){
	 	context.globalAlpha = 1;
	 	context.fillStyle = "#000000";
	 	context.fillRect(0,0,640,480);

	 	context.globalAlpha = .25;
	 	context.drawImage(helloWorldImage,0,0);

	 	if(fadeIn){
	 		alpha += .01;
	 		if(alpha>=1){
	 			alpha = 0;
	 			fadeIn = flase;
	 		}
	 	}else{
	 		alpha -= .01;
	 		if(alpha<0){
	 			alpha = 0;
	 			fadeIn = true;
	 		}
	 	}

	 	context.font="72px Sans-Serif";
		context.textBaseline="top";

		context.globalAlpha = alpha;
		context.fillStyle = "#ffffff";
		context.fillText(text,150,200);
	 }

	var text = "Hello Beauty!";
	var alpha = 0;
	var fadeIn = true;

	var helloWorldImage = new Image();
	helloWorldImage.src = "love.png";

	    function gameLoop(){
	    	window.setTimeout(gameLoop,20);
	    	drawScreen();
	    } 

	    gameLoop();
	}
</script>
</head>
<body>
	<div style="position: absolute;top: 50px;left: 50px">
		<canvas id="canvasOne" width="800" height="500">
			your liar!
		</canvas>
	</div>
</body>
</html>

动态修改：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>第三章</title>


<script src="modernizr-1.6.min.js"></script>
<script src="jscolor.js"></script>
<script type="text/javascript">
window.addEventListener("load",eventWindowLoaded,false);
function eventWindowLoaded(){
	canvasApp();
} 
function canvasSupport(){
	return Modernizr.canvas;
}
function eventWindowLoaded(){
	var patternPerload = new Image();
	patternPerload.onload = eventAssetsLoaded;
	patternPerload.src = "love.png";
}
function eventAssetsLoaded(){
	canvasApp();
}

function canvasApp(){
	var fontSize = "50";
	var message = "your text";
	var fontFace = "serif";
	var textFillColor = "#ff0000";
	var textAlpha = "1";
	var shadowX = 1;
	var shadowY = 1;
	var shadowBlur = 1;
	var shadowColor = "#707070";
	var textBaseline  ="middle";
	var textAlign = "center";
	var fillOrStroke  = "fill";
	var fontWeight = "normal";
	var fontStyle = "normal";
	var fillType = "colorFill";
	var textFillColor2 = "#000000";
	var pattern = new Image();

	 if (!canvasSupport()){
	 	return;
	 }
	 var theCanvas = document.getElementById("canvasOne");
	 var context = theCanvas.getContext("2d");

	 var formElement = document.getElementById("textBox");
	 formElement.addEventListener("keyup",textBoxChanged,false);

	 formElement = document.getElementById("fillOrStroke");
	 formElement.addEventListener("change",fillOrStrokeChanged,false);

	 formElement = document.getElementById("textSize");
	 formElement.addEventListener("change",textSizeChanged,false);

	 formElement = document.getElementById("textFillColor");
	 formElement.addEventListener("change",textFillColorChanged,false);

	 formElement = document.getElementById("textFont");
	 formElement.addEventListener("change",textFontChanged,false);

	 formElement = document.getElementById("textBaseline");
	 formElement.addEventListener("change",textBaselineChanged,false);

	 formElement = document.getElementById("textAlign");
	 formElement.addEventListener("change",textAlignChanged,false);

	 formElement = document.getElementById("fontWeight");
	 formElement.addEventListener("change",fontWeightChanged,false);

	 formElement = document.getElementById("shadowX");
	 formElement.addEventListener("change",shadowXChanged,false);

	 formElement = document.getElementById("shadowY");
	 formElement.addEventListener("change",shadowYChanged,false);

	 formElement = document.getElementById("shadowBlur");
	 formElement.addEventListener("change",shadowBlurChanged,false);

	 formElement = document.getElementById("textAlpha");
	 formElement.addEventListener("change",textAlphaChanged,false);

	 formElement = document.getElementById("textFillColor2");
	 formElement.addEventListener("change",textFillColor2Changed,false);

	 formElement = document.getElementById("fillType");
	 formElement.addEventListener("change",fillTypeChanged,false);

	 formElement = document.getElementById("canvasWidth");
	 formElement.addEventListener("change",canvasWidthChanged,false);

	 formElement = document.getElementById("canvasHeight");
	 formElement.addEventListener("change",canvasHeightChanged,false);

	 formElement = document.getElementById("createImageData");
	 formElement.addEventListener("click",createImageDataPressed,false);

	 pattern.src = "love.png";

	 drawScreen();

	 function drawScreen(){
	 	context.globalAlpha = 1;
	 	context.shadowColor = "#707070";
	 	context.shadowOffsetX = 0;
	 	context.shadowOffsetY = 0;
	 	context.shadowBlur = 0;
	 	context.fillStyle = "#fffaaa";
	 	context.fillRect(0,0,theCanvas.width,theCanvas.height);

	 	context.strokeStyle = "#000000";
	 	context.strokeRect(5,5,theCanvas.width-10,theCanvas.height-10);

	 	context.textBaseline = textBaseline;
	 	context.textAlign = textAlign;
	 	context.font = fontWeight + " "+fontStyle+" "+fontSize+"px"+fontFace;
	 	context.shadowColor = shadowColor;
	 	context.shadowOffsetX = shadowX;
	 	context.shadowOffsetY = shadowY;
	 	context.shadowBlur = shadowBlur;
	 	context.globalAlpha = textAlpha;

	 	var xPostion = (theCanvas.width/2);
	 	var yPostion = (theCanvas.height/2);

	 	var metrics = context.measureText(message);
	 	var textWidth = metrics.width;

	 	var tempColor;
	 	if(fillType == "colorFill"){
	 		tempColor = textFillColor;
	 	}else if(fillType == "linearGradient"){

	 		var gradient = context.createLinearGradient(xPostiontextWidth/2,yPostion,textWidth,yPostion);
	 		gradient.addColorStop(0,textFillColor);
	 		gradient.addColorStop(.6,textFillColor2);
	 		tempColor = gradient;
	 	}else if(fillType = "pattern"){
	 		var tempColor = context.createPattern(pattern,"repeat");
	 	}else{
	 		tempColor = textFillColor;
	 	}

	 	switch(fillOrStroke){
	 		case"fill":
	 		context.fillStyle = tempColor;
	 		context.fillText(message,xPostion,yPostion);
	 		break;
	 		case"stroke":
	 		context.strokeStyle = tempColor;
	 		context.strokeText(message,xPostion,yPostion);
	 		break;
	 		case"both":
	 		context.fillStyle = tempColor;
	 		context.fillText(message,xPostion,yPostion);
	 		context.strokeStyle = "#000000";
	 		context.strokeText(message,xPostion,yPostion);
	 		break;
	 	}
	 }
    
    function textBoxChanged(e){
    	var target = e.target;
    	message = target.value;
    	drawScreen();
    }

    function fillOrStrokeChanged(e){
    	var target = e.target;
    	fillOrStroke = target.value;
    	drawScreen();
    }

    function textBaselineChanged(e){
    	var target = e.target;
    	textBaseline = target.value;
    	drawScreen();
    }

    function textAlignChanged(e){
    	var target = e.target;
    	textAlign = target.value;
    	drawScreen();
    }

    function textSizeChanged(e){
    	var target = e.target;
    	fontSize = target.value;
    	drawScreen();
    }

    function textFillColorChanged(e){
    	var target = e.target;
    	textFillColor = target.value;
    	drawScreen();
    }

    function textFontChanged(e){
    	var target = e.target;
    	fontFace = target.value;
    	drawScreen();
    }

    function fontWeightChanged(e){
    	var target = e.target;
    	fontWeight = target.value;
    	drawScreen();
    }

    function fillStyleChanged(e){
    	var target = e.target;
    	fontStyle = target.value;
    	drawScreen();
    }

    function shadowXChanged(e){
    	var target = e.target;
    	shadowX = target.value;
    	drawScreen();
    }

    function shadowYChanged(e){
    	var target = e.target;
    	shadowY = target.value;
    	drawScreen();
    }

    function shadowBlurChanged(e){
    	var target = e.target;
    	shadowBlur = target.value;
    	drawScreen();
    }

    function shadowColorChanged(e){
    	var target = e.target;
    	shadowColor = target.value;
    	drawScreen();
    }

    function textAlphaChanged(e){
    	var target = e.target;
    	textAlpha = target.value;
    	drawScreen();
    }

    function textFillColor2Changed(e){
    	var target = e.target;
    	textFillColor2 = target.value;
    	drawScreen();
    }

    function fillTypeChanged(e){
    	var target = e.target;
    	fillType = target.value;
    	drawScreen();
    }

    function canvasWidthChanged(e){
    	var target = e.target;
    	theCanvas.width = target.value;
    	drawScreen();
    }

    function canvasHeightChanged(e){
    	var target = e.target;
    	theCanvas.height = target.value;
    	drawScreen();
    }

    function canvasStyleSizeChanged(e){
    	var styleWidth = document.getElementById("canvasStyleWidth");
    	var styleHeight = document.getElementById("canvasStyleHeight");
    	var styleValue = "width:"+styleWidth.value+"px;height:"+styleHeight.value+"px;";
    	theCanvas.setAttribute("style",styleValue);
    	drawScreen();
    }

    function createImageDataPressed(e){

    	var imageDataDisplay = document.getElementById("imageDataDisplay");
    	imageDataDisplay.value = theCanvas.toDataURL();
    	window.open(imageDataDisplay.value,"canvasImage","left=0,top=0,width="+theCanvas.width+",height"+theCanvas.height+",toolbar=0,resizable=0");
    }

}
</script>
</head>
<body>
<div style="position: absolute;top: 50px;left: 50px;">
<canvas id="canvasOne" width="500" height="300">you liar!</canvas>
<form>
	Text:<input id="textBox" placeholder="your text" />
	<br />
	Text Font:<select id="textFont">
	<option value="serif">serif</option>
	<option value="sans-serif">sana-serif</option>
	<option value="cursive">cursive</option>
	<option value="fantasy">fantasy</option>
	<option value="monospace">monospace</option>
     </select>
     <br>
     Font Weight:<select id="fontWeight">
     	<option value="normal">normal</option>
     	<option value="bold">bold</option>
     	<option value="bolder">bolder</option>
     	<option value="lighter">lighter</option>
     </select>
     <br>

     Font Style:
     <select>
     	<option value="normal">normal</option>
     	<option value="italic">italic</option>
     	<option value="oblique">oblique</option>
     </select>
     <br>
     Text Size:
     <input type="range" id="textSize" min="0" max="200" step="1" value="50" />
     <br>

     Fill Type:
     <select id="fillType">
     	<option value="colorFill">color fill</option>
     	<option value="linearGradient">linear Gradient</option>
     	<option value="radialGrandient">radial Gradient</option>
     	<option value="pattern">pattern</option>
     </select>
     <br>
     Text Color:<input class="color" id="textFillColor" value="FF0000" />
     <br>
     Text Color 2<input class="color" id="textFillColor2" value="000000" />
     <br>
     Fill Or Stroke:<select id="fillOrStroke">
     	<option value="fill">fill</option>
     	<option value="stroke">stroke</option>
     	<option value="both">both</option>
     </select>
     <br>
     Text Baseline:<select id="textBaseline">
     	<option value="middle">middle</option>
     	<option value="top">top</option>
     	<option value="hanging">hanging</option>
     	<option value="alphabetic">alphabetic</option>
     	<option value="ideographic">ideographic</option>
     	<option value="bottom">bottom</option>
     </select>
     <br>
     Text Align:<select id="textAlign">
     	<option value="center">center</option>
     	<option value="start">start</option>
     	<option value="end">end</option>
     	<option value="left">left</option>
     	<option value="right">right</option>
     </select>
     <br>

     Alpha: <input type="range" id="textAlpha" min="0" max="1.0" step="0.01" value="1.0">
     <br>
     Shadow X<input type="range" id="shadowX" min="-100" max="100" step="1" value="1">
     <br>
     Shadow Y<input type="range" id="shadowY" min="-100" max="100" step="1" value="1">
     <br>
     Shadow Blur <input type="range" id="shadowBlur" min="1" max="100" step="1" value="1">
     <br>
     Shadow Color<input class="color" id="shadowColor"  value="707070">
     <br>
     Canvas Width:<input type="range" id="canvasWidth" min="0" max="1000" step="1" value="500">
     <br>
     Canvas Height:<input type="range" id="canvasHeight" min="0" max="1000" step="1" value="300">
     <br>
     Canvas Style Width:<input type="range" id="canvasStyleWidth" min="0" max="1000" step="1" value="500">
     <br>
     Canvas Style Height:<input type="range" id="canvasStyleHeight" min="0" max="1000" step="1" value="300">
     <br>
     <input type="button" id="createImageData" value="Create Image Data">
     <br>
     <textarea id="imageDataDisplay" rows="10" cols="30"></textarea>
</form>
</div>
</body>
</html>

多球反弹球

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>多球反弹球</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener("load",eventWindowLoaded,false);
function eventWindowLoaded(){
	canvasApp();
} 
function canvasSupport(){
	return Modernizr.canvas;
}
function canvasApp(){
	if(!canvasSupport()){
		return;
	}

	formElement = document.getElementById("canvasWidth")
	formElement.addEventListener('change',canvasWidthChanged,false);

	formElement = document.getElementById("canvasHeight")
	formElement.addEventListener('change',canvasHeightChanged,false);



	function drawScreen(){
		context.fillStyle ="#eeeeee";
		context.fillRect(0,0,theCanvas.width,theCanvas.height);
		context.strokeStyke = "#000000";
		context.strokeRect(1,1,theCanvas.width-2,theCanvas.height-2);
			
		context.fillStyle = "#000000";
		var ball;

		for(var i = 0;i<balls.length;i++){
			ball = balls[i];
			ball.x+=ball.xuints;
			ball.y+=ball.yuints;
		
		context.beginPath();
		context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
		context.closePath();
		context.fill();

		if(ball.x>theCanvas.width||ball.x<0){
			ball.angle = 180-ball.angle;
			updateBall(ball);
		}else if(ball.y>theCanvas.height||ball.y<0){
			ball.angle = 360-ball.angle;
			updateBall(ball);
		}
	}
}
	function updateBall(ball){
		ball.radians = ball.angle*Math.PI/180;
		ball.xuints = Math.cos(ball.radians)*ball.speed;
		ball.yuints = Math.sin(ball.radians)*ball.speed;
	}
	    

		var numBalls = 25;
		var maxSize = 8;
		var minSize = 5;
		var maxSpeed = maxSize+5;
		var balls = new Array();
		var tempBall;
		var tempX;
		var tempY;
		var tempSpeed;
		var tempAngle;
		var tempRadius;
		var tempRadians
		var tempXunits;
		var tempYunits;

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

		for (var i = 0; i <numBalls; i++) {
			tempRadius = Math.floor(Math.random()*maxSize)+minSize;
			tempX = tempRadius*2+( Math.floor(Math.random()*theCanvas.width)-tempRadius*2);
			tempY = tempRadius*2+( Math.floor(Math.random()*theCanvas.height)-tempRadius*2);
			tempSpeed = maxSpeed-tempRadius;
			tempAngle = Math.floor(Math.random()*360);
			tempRadians = tempAngle*Math.PI/180;
			tempXunits = Math.cos(tempRadians)*tempSpeed;
			tempYunits = Math.sin(tempRadians)*tempSpeed;

			tempBall = {x:tempX,y:tempY,radius:tempRadius,speed:tempSpeed,angle:tempAngle,xuints:tempXunits,yuints:tempYunits}
			balls.push(tempBall);
		}

		function gameLoop(){
			window.setTimeout(gameLoop,20);
			drawScreen();
		}
		gameLoop();

		function canvasWidthChanged(e){
			var target = e.target;
			theCanvas.width = target.value;
			drawScreen();
		}

		function canvasHeightChanged(e){
			var target = e.target;
			theCanvas.height = target.value;
			drawScreen();
		}

}
</script>
</head>
<body>
<div>
	<canvas id="canvas" width="500" height="500" style="position: absolute;top: 50px;
	left: 50px;">you liar!</canvas>
<form>
	CanvasWidth:<input type="range" id="canvasWidth" min="0" max="1000" step="1" value="500">
	<br>
	CanvasHeight:<input type="range" id="canvasHeight" min="0" max="1000" step="1" value="500">
</form>
	</div>
</body>
</html>

缓冲运动：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>缓冲运动</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener("load",eventWindowLoaded,false);
var shipImage;
function eventWindowLoaded(){
	shipImage = new Image();
	shipImage.src = "love.png"
	shipImage.onload = eventAssetsLoaded;
	
} 
function eventAssetsLoaded(){
	canvasApp();
}
function canvasSupport(){
	return Modernizr.canvas;
}
function canvasApp(){
	if(!canvasSupport()){
		return;
	}
var pointImage = new Image();
pointImage.src="love.png";

	function drawScreen(){
		context.fillStyle ="#000000";
		context.fillRect(0,0,theCanvas.width,theCanvas.height);
		context.strokeStyle = "#ffffff";
		context.strokeRect(1,1,theCanvas.width-2,theCanvas.height-2);
		var dx = ship.endx-ship.x;
		var dy = ship.endy-ship.y;

		ship.velocityx = dx*easeValue;
		ship.velocityy = dy*easeValue;

		ship.x += ship.velocityx;
		ship.y += ship.velocityy;

		points.push({x:ship.x,y:ship.y});

		for(var i=0;i<points.length;i++){
			context.drawImage(pointImage,points[i].x+shipImage.width/2,points[i].y,1,1);
		}

		context.drawImage(shipImage,ship.x,ship.y);

		
	}

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

		var easeValue = .05;
		var p1 = {x:240,y:-20};
		var p2 = {x:240,y:470};

		var ship = {x:p1.x,y:p1.y,endx:p2.x,endy:p2.y,velocityx:0,velocityy:0};
		var points = new Array();

		function gameLoop(){
			window.setTimeout(gameLoop,20);
			drawScreen();
		}
		gameLoop();
}
</script>
</head>
<body>
<div>
	<canvas id="canvas" width="500" height="500" style="position: absolute;top: 50px;
	left: 50px;">you liar!</canvas></div>
</body>
</html>

打箱子：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>打箱子</title>
<script src="modernizr-1.6.min.js"></script>
<script src="box2dweb-master/Box2D.js"></script>
<script type="text/javascript">
window.addEventListener("load",eventWindowLoaded,false);

function eventWindowLoaded(){
	canvasApp();
} 
function canvasSupport(){
	return Modernizr.canvas;
}
function canvasApp(){
	if(!canvasSupport()) {
		return;
	}


 function drawScreen(){
      world.Step(1 / 60,10,10);
      world.DrawDebugData();
      world.ClearForces();

      context.strokeStyle = '#000000';
      context.fillStyle = '#eeeeee';
      context.fillRect(0,0,theCanvas.width,theCanvas.height);

      context.fillStyle = '#000000';
      context.strokeRect(1,1,theCanvas.width-2,theCanvas.height-2);
      for (var i = 0; i < boxes.length; i++) {
      	var position = boxes[i].GetPosition();
      	var fixtureList = boxes[i].GetFixtureList();
      	var shape = fixtureList.GetShape();
      	var userData = boxes[i].GetUserData();
      	context.save();
      	context.setTransform(1,0,0,1,0,0);
      	context.translate(position.x*scaleFactor,position.y*scaleFactor);
      	context.rotate(boxes[i].GetAngle());
      	context.fillRect(0-(userData.width*scaleFactor/2),0-(userData.height*scaleFactor/2),userData.width*scaleFactor,userData.height*scaleFactor);
      	context.restore();
      }
      for(var i = 0;i<balls.length;i++){
      	var position = balls[i].GetPosition();
      	var fixtureList = balls[i].GetFixtureList();
      	var shape = fixtureList.GetShape();
      	context.fillStyle = '#FF0000';
      	context.beginPath();
      	context.arc(position.x*scaleFactor,position.y*scaleFactor,shape.GetRadius()*scaleFactor,0,Math.PI*2,true);
      	context.closePath();
      	context.fill();
      }
	}
	function createBall(event){
		var x;
		var y;
		if(event.pageX || event.pageY){
			x = event.pageX;
			y = event.pageY;
		}
		else{
			x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
		x -= theCanvas.offsetLeft;
		y -= theCanvas.offsetTop;
		mouseX = x;
		mouseY = y;
		var ballDef = new b2BodyDef;
		ballDef.type = b2Body.b2_dynamicBody;
		var ypos = mouseY/scaleFactor;
		var xpos = mouseX/scaleFactor;
		var size = 7/scaleFactor;
		ballDef.position.Set(xpos,ypos);
		var ballFixture = new b2FixtureDef;
		ballFixture.density = 30.0;
		ballFixture.friction = 0.6;
		ballFixture.restitution = .2;
		ballFixture.shape = new b2CircleShape(size);
		var newBall = world.CreateBody(ballDef);
		newBall.CreateFixture(ballFixture);
		var xVelocity = 15;
		var yVelocity = 0;
		newBall.SetLinearVelocity(new b2Vec2(xVelocity,yVelocity));
		balls.push(newBall);
	}
	var theCanvas  = document.getElementById("canvas");
    var context = theCanvas.getContext("2d");

    var theCanvasTwo = document.getElementById("canvasTwo");
    var context2 = theCanvasTwo.getContext("2d");

    theCanvas.addEventListener("mouseup",createBall,false);

    var scaleFactor = 30;
    var b2Vec2 = Box2D.Common.Math.b2Vec2
    ,b2BodyDef = Box2D.Dynamics.b2BodyDef
    ,b2Body = Box2D.Dynamics.b2Body
    ,b2FixtureDef = Box2D.Dynamics.b2FixtureDef
    ,b2World = Box2D.Dynamics.b2World
    ,b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
    ,b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
    ,b2DebugDraw = Box2D.Dynamics.b2DebugDraw;

    var world = new b2World(new b2Vec2(0,20),true);
    var numBoxes = 13;
    var boxes = new Array();
    var balls = new Array();
    var boxHeight = 25;
    var boxWidth = 25;
    var startX = (theCanvas.width-100);
    var startY = (theCanvas.height-boxHeight)-100;
    for (var i = 0; i < numBoxes; i++) {
    	var boxDef = new b2BodyDef;
    	boxDef.type = b2Body.b2_dynamicBody;
    	var ypos = (startY-(i*boxHeight))/scaleFactor;
    	var xpos = (startX)/scaleFactor;
    	boxDef.position.Set(xpos,ypos);
    	var newBox = world.CreateBody(boxDef);
    	var boxFixture = new b2FixtureDef;
    	boxFixture.density = 20.0;
		boxFixture.friction = 0.5;
		boxFixture.restitution = .1;
		boxFixture.shape = new b2PolygonShape;
		boxFixture.shape.SetAsBox((boxWidth/scaleFactor)/2,(boxHeight/scaleFactor)/2);
		newBox.CreateFixture(boxFixture);
		newBox.SetUserData({width:boxWidth/scaleFactor,height:boxHeight/scaleFactor});
		boxes.push(newBox);
    }

    var wallDefs = new Array(
    	{x:theCanvas.width,y:0,w:theCanvas.width,h:1},
    	{x:theCanvas.width,y:theCanvas.height,w:theCanvas.width,h:1},
    	{x:0,y:theCanvas.height,w:1,h:theCanvas.height},
    	{x:theCanvas.width,y:theCanvas.height,w:1,h:theCanvas.height});
    var walls = new Array();
    for (var i = 0; i < wallDefs.length; i++) {
    	var wallDef = new b2BodyDef;
    	wallDef.type = b2Body.b2_staticBody;
    	wallDef.position.Set(wallDefs[i].x/scaleFactor,wallDefs[i].y/scaleFactor);
    	var newWall = world.CreateBody(wallDef);
    	var wallFixture = new b2FixtureDef;
    	wallFixture.density = 10.0;
		wallFixture.friction = 0.5;
		wallFixture.restitution = .5;
		wallFixture.shape = new b2PolygonShape;
		wallFixture.shape.SetAsBox(wallDefs[i].w/scaleFactor,wallDefs[i].h/scaleFactor);
		newWall.CreateFixture(wallFixture);
		walls.push(newWall);
    }
    var debugDraw = new b2DebugDraw();
    debugDraw.SetSprite(context2);
    debugDraw.SetDrawScale(scaleFactor);
    debugDraw.SetFillAlpha(0.3);
    debugDraw.SetLineThickness(1.0);
    debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
    world.SetDebugDraw(debugDraw);

    function gameLoop(){
			window.setTimeout(gameLoop,20);
			drawScreen();
		}
		gameLoop();
}
 

</script>
</head>
<body>
<div>
	<canvas id="canvas" width="450" height="350" style="position: absolute;top: 50px;
	left: 50px;">you liar!</canvas>
	<canvas id="canvasTwo" width="450" height="350" style="position: absolute;top: 50px;
	left: 550px;">you liar!</canvas>
</body>
</html>

最后的打箱子是学到有点像愤怒的小鸟的demo的感觉

后面的项目有用到canvas做动态背景，不过我直接copy网友的代码。

Finca_huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人练习小览---canvas学习

最开始学习canvas是为了在网页有一个酷炫的背景，当时看到心里就说，哇，这简直太酷炫了。但是canvas我学习一点之后发现是制作游戏的，敲了一段时间，大概是在2017年11月一直断断续续学习到2018年的2月份，最后制作了一个demo就没有继续学习了，因为最后发现这个学再久也不如在借鉴网友的代码去修改来理解得快，说我浮躁也好，基本语法会了之后就是将创意实现的过程，我暂时没有后者的实力，只能老老实...
复制链接

扫一扫