HTML5 canvas画布学习实例

最新推荐文章于 2022-11-30 17:41:04 发布

疾飞鱼

最新推荐文章于 2022-11-30 17:41:04 发布

阅读量1.2k

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/ntt126796/article/details/51830127

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实例一：画坦克图片并实现坦克的上下左右的移动

如图：

代码如下：

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body οnkeydοwn="testkey()">
<h1>经典的坦克大战</h1>
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript" src="C:\Users\ntt\Documents\tankGame2.js"></script>
<script type="text/javascript">
    var canvas1=document.getElementById('tankMap');
    var cxt=canvas1.getContext("2d");
    var hero =new hero(40,40,0);
    drawTank(hero);
 function testkey(){
    //alert("OOOOO");
    var code=event.keyCode;
    //alert(code);
    switch(code){
          case 87:
          //hero.y-=hero.spead;
          hero.moveUp();
          break;
          case 68:
         // hero.x+=hero.spead;
          hero.moveRight();
          break;
          case 83:
         // hero.y+=hero.spead;
          hero.moveDown();
          break;
          case 65:
          //hero.x-=hero.spead;
          hero.moveLeft();
          break;
    }
        //清画布 否则会连起来！！
        cxt.clearRect(0,0,400,300);
        drawTank(hero);
  }

</script>

</body>
</html>

js代码如下 tankGame2.js：

//我的坦克hero
    function hero(x,y,direct){
       this.x=x;
       this.y=y;
       this.spead=1;
       this.direct=direct;
       //上移
       this.moveUp=function(){
         this.y-=this.spead;
         this.direct=0;
       }
       //右移
        this.moveRight=function(){
         this.x+=this.spead;
         this.direct=1;
       }
       //下移
        this.moveDown=function(){
         this.y+=this.spead;
         this.direct=2;
       }
       //左移
        this.moveLeft=function(){
         this.x-=this.spead;
         this.direct=3;
       }
    }

    
     //画坦克
      function drawTank(tank){

       //坦克变方向
       switch(tank.direct){
         case 0:
         case 2:
        //画坦克
        cxt.fillStyle="#DED284";
        cxt.fillRect(tank.x,tank.y,5,30);
        cxt.fillRect(tank.x+15,tank.y,5,30);
        cxt.fillRect(tank.x+6,tank.y+5,8,20);
        cxt.fillStyle="#FFD972";
        cxt.arc(tank.x+10,tank.y+15,4,0,360,true);
        cxt.fill();
        //画炮筒
        cxt.strokeStyle="#FFD972";
        cxt.lineWidth=2;
        cxt.beginPath();
        cxt.moveTo(tank.x+10,tank.y+15);
        if(tank.direct==0){
        cxt.lineTo(tank.x+10,tank.y);
        }else if(tank.direct==2){
        cxt.lineTo(tank.x+10,tank.y+30);
        }
        cxt.closePath();
        cxt.stroke(); 
         break;

         case 1:
         case 3:
        //画坦克
        cxt.fillStyle="#DED284";
        cxt.fillRect(tank.x,tank.y,30,5);
        cxt.fillRect(tank.x,tank.y+15,30,5);
        cxt.fillRect(tank.x+5,tank.y+6,20,8);
        cxt.fillStyle="#FFD972";
        cxt.arc(tank.x+15,tank.y+10,4,0,Math.PI*2,true);
        cxt.fill();
        //画炮筒
        cxt.strokeStyle="#FFD972";
        cxt.lineWidth=2;
        cxt.beginPath();
        cxt.moveTo(tank.x+15,tank.y+10);
        if(tank.direct==3){
        cxt.lineTo(tank.x,tank.y+10);
        }else if(tank.direct==1){
        cxt.lineTo(tank.x+30,tank.y+10);
        }
        cxt.closePath();
        cxt.stroke(); 
         break;
       }
    }

实例二：会移动的小球

如图：

按 WASD 上下左右移动

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>小球移动！！</title>
	<meta charset="utf-8">
</head>
<body  οnkeydοwn="testkey()">
<canvas id="test" width="400" height="300" style="background-color:black"></canvas>

<script type="text/javascript">
  var canvas1=document.getElementById('test');
  var cxt = canvas1.getContext("2d");
   var ballX=30;
   var ballY=30;
   drawBall();
  function drawBall(){
   cxt.fillStyle="#ff0000";
   cxt.beginPath();
   cxt.arc(ballX,ballY,10,0,Math.PI*2,true);
   cxt.closePath();
   cxt.fill();
  }
  
  function testkey(){
  	//alert("OOOOO");
  	var code=event.keyCode;
  	//alert(code);
  	switch(code){
          case 87:
          ballY--;
          break;
          case 68:
          ballX++;
          break;
          case 83:
          ballY++;
          break;
          case 65:
          ballX--;
          break;
  	}
  	    //清画布 否则会连起来！！
  	    cxt.clearRect(0,0,400,300);
     	drawBall();
  }
</script>
</body>
</html>

实例三：转换实例

如图：

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<Title>Transformations Example</title>
<script>

window.onload = function() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");

var rectWidth = 250;
var rectHeight = 75;

// 把context平移到画布的中心
context.translate(canvas.width/2,canvas.height/2); 

// y方向的组成减半 
context.scale(1,0.5);

// 顺时针旋转45度
context.rotate(-Math.PI/4); 

context.fillStyle="blue";
context.fillRect(-rectWidth/2,-rectHeight/2,
rectWidth,rectHeight);

// 水平方向翻转context
context.scale(-1,1);

context.font="30pt Calibri";
context.textAlign="center";
context.fillStyle="#ffffff";
context.fillText("Mirror Image",3,10);

}

</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

疾飞鱼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas画布学习实例

实例一：画坦克图片如图：代码如下：经典的坦克大战 var canvas1=document.getElementById('tankMap'); var cxt=canvas1.getContext("2d"); var heroX=130; var heroY=30; //画坦克 cxt.fillStyle=
复制链接

扫一扫