html5画布canvas效果实例

2015-5-21 Jon html+css

使用html5画布canvas实现简单画板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单画板</title>
  <style>
    body{margin:0;}
    #paint{border:1px solid #232323;}
  </style>
</head>
<body>
  <canvas id="paint" width="1200" height="600">
    您的浏览器不支持canvas
  </canvas>

  <script>
    var oPaint=document.getElementById('paint');
    var cxt=oPaint.getContext('2d');
    cxt.lineWidth=3;
    cxt.strokeStyle="blue";
    var cont=0;
    oPaint.onmousedown=function(e){
      var event=e||event;
      var mouseX=event.pageX-this.offsetLeft;
      var mouseY=event.pageY-this.offsetTop;
      cont=1;
      cxt.moveTo(mouseX,mouseY);
    }
    oPaint.onmousemove=function(e){
      var event=e||event;
      var mouseX=event.pageX-this.offsetLeft;
      var mouseY=event.pageY-this.offsetTop;
      if(cont){
        cxt.lineTo(mouseX,mouseY);
        cxt.stroke();
      }
    }
    oPaint.onmouseup=function(e){
      cont=0;
    }
  </script>
</body>
</html>

您可以修改框中代码后运行查看

使用html5画布画出简易时钟

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>简易时钟</title>
  </head>
  <body>
    <canvas id="clock" width="500" height="500">
      你可以更新浏览器了
    </canvas>
    <script>
      var clock=document.getElementById('clock');
      var cxt=clock.getContext('2d');

      function drawClock(){
        // 清除画布
        cxt.clearRect(0,0,500,500);
        var now=new Date();
        var sec=now.getSeconds();
        var min=now.getMinutes();
        var hour=now.getHours();
        //小时必须获取浮点类型（小时+分数转化成的小时）
        hour=hour+min/60;
        // 问题 19:23:30
        // 将24小时进制转换成12小时
        hour=hour>12?hour-12:hour;

        // 表盘(蓝色)
        cxt.lineWidth=10;
        cxt.strokeStyle="blue";
        cxt.beginPath();
        cxt.arc(250,250,200,0,360,false);//x,y,半径,起始弧度，结束弧度,旋转方向
        cxt.closePath();
        cxt.stroke();//画上

        // 刻度
          // 时刻度
          for(var i=0;i<12;i++){
            cxt.save();
            cxt.lineWidth=7;
            cxt.strokeStyle="#000";
            // 设置0,0点
            cxt.translate(250,250);
            // 设置旋转角度
            cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
            cxt.beginPath();
            cxt.moveTo(0,-170);
            cxt.lineTo(0,-190);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
          }
          // 分刻度
          for(var i=0;i<60;i++){
            cxt.save();
            cxt.lineWidth=5;
            cxt.strokeStyle="#000";
            cxt.translate(250,250);
            cxt.rotate(i*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-180);
            cxt.lineTo(0,-190);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
          }
          // 时针
          cxt.save();
          cxt.lineWidth=7;
          cxt.strokeStyle="#000";
          cxt.translate(250,250);
          cxt.rotate(hour*30*Math.PI/180);
          cxt.beginPath();
          cxt.moveTo(0,-120);
          cxt.lineTo(0,8);
          cxt.closePath();
          cxt.stroke();
          cxt.restore();

          // 分针
          cxt.save();
          cxt.lineWidth=5;
          cxt.strokeStyle="green";
          cxt.translate(250,250);
          cxt.rotate(min*6*Math.PI/180);
          cxt.beginPath();
          cxt.moveTo(0,-150);
          cxt.lineTo(0,12);
          cxt.closePath();
          cxt.stroke();
          cxt.restore();

          // 秒针
          cxt.save();
          cxt.lineWidth=3;
          cxt.strokeStyle="red";
          cxt.translate(250,250);
          cxt.rotate(sec*6*Math.PI/180);
          cxt.beginPath();
          cxt.moveTo(0,-170);
          cxt.lineTo(0,15);
          cxt.closePath();
          cxt.stroke();
          // 画出时针、分针、秒针的交叉点
          cxt.beginPath();
          cxt.arc(0,0,5,0,360,false);
          cxt.closePath();
          // 设置填充样式
          cxt.fillStyle="gray";
          cxt.fill();
          cxt.stroke();
          cxt.beginPath();
          cxt.arc(0,-150,3,0,360,false);
          cxt.closePath();
          cxt.fillStyle="yellow";
          cxt.fill();
          cxt.stroke();
          cxt.restore();
      }
      drawClock();
      setInterval(drawClock,1000);
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

使用html5画布画出八大星系（js使用方法实现）

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>八大星系</title>
    <style>
      #canStart{background: #000;}
    </style>
  </head>
  <body>
    <canvas id="canStart" height="1000" width="1000">
      您的浏览器不支持canvas
    </canvas>
    <script>
      var canStart=document.getElementById('canStart');
      var cxt=canStart.getContext('2d');

      // 画轨道
      function drawWay(){
        for(var i=0;i<8;i++){
          cxt.beginPath();
          cxt.strokeStyle="#fff";
          cxt.arc(500,500,(i+1)*50,0,360,false);
          cxt.closePath();
          cxt.stroke();
        }
      }
      var time=0;
      // 画星球
      //圆点坐标x、y,半径r,周期t,填充色sColor,eColor
      function drawStart(x,y,r,t,sColor,eColor){
        cxt.save();
        cxt.translate(500,500);
        cxt.rotate(time*360/t*Math.PI/180);
        cxt.beginPath();
        cxt.arc(x,y,r,0,360,false);
        cxt.closePath();
        var color=cxt.createRadialGradient(x,y,0,x,y,r);
        color.addColorStop(0,sColor);
        color.addColorStop(1,eColor);
        cxt.fillStyle=color;
        cxt.fill();
        cxt.restore();
      }
      function useDrawStart(){
        cxt.clearRect(0,0,1000,1000);
        drawWay();
        // 画太阳
        drawStart(0,0,20,0,'#f00','#f90');
        // 画水星
        drawStart(-50,0,10,87,'#A69697','#5C3E40');
        // 画金星
        drawStart(-100,0,10,224,'#C4BBAC','#1F1315');
        // 画地球
        drawStart(-150,0,10,365,'#78B1E8','#050C12');
        // 画火星
        drawStart(-200,0,10,686,'#CEC9B6','#76422D');
        // 画木星
        drawStart(-250,0,10,4332,'#C0A48E','#322222');
        // 画土星
        drawStart(-300,0,10,10759,'#F7F9E3','#5C4533');
        // 画天王星
        drawStart(-350,0,10,30799,'#A7E1E5','#19243A');
        // 画海王星
        drawStart(-400,0,10,164.8*365,'#0661B2','#1E3B73');
        time++;
      }
      setInterval(useDrawStart, 10);
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

使用html5画布画出八大星系（js使用对象实现）

  <!doctype html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>八大星系2</title>
    </head>
    <body>
      <canvas id="canvas" width="1000" height="1000" style="background:#000">
        您的浏览器不支持canvas标签
      </canvas>
      <script>
        //设置2d绘图环境
        var cxt=document.getElementById('canvas').getContext('2d');
        
        //轨道
        function drawTrack(){
          for(var i=0;i<8;i++){
            cxt.beginPath();
            cxt.arc(500,500,(i+1)*50,0,360,false);
            cxt.closePath();
            //设置笔触的颜色
            cxt.strokeStyle="#fff";
            cxt.stroke();
          }
        
        }
        drawTrack();
        //星球
        function Star(x,y,radius,cycle,sColor,eColor){
          //画出星球需要哪些属性
          //星球的坐标点
          this.x=x;
          this.y=y;
          //星球的半径
          this.radius=radius;
          //公转周期
          this.cycle=cycle;
          //星球的颜色(开始色,结束色)
          this.sColor=sColor;
          this.eColor=eColor;
          //新建一个渐变颜色空对象
          this.color=null;
          //设置一个计时器
          this.time=0;
          this.draw=function(){
            //保存之前的画布内容
            cxt.save();
            //重置0,0坐标点
            cxt.translate(500,500);
            //设置旋转角度
            cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
            //画星球
            cxt.beginPath();
            cxt.arc(this.x,this.y,this.radius,0,360,false);
            cxt.closePath();
            //设置星球的填充颜色
            //新建渐变对象
            this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
            //设置渐变效果
            this.color.addColorStop(0,this.sColor);//渐变开始点和颜色
            this.color.addColorStop(1,this.eColor);//渐变结束点和颜色
            cxt.fillStyle=this.color;//将渐变对象复制给填充画笔
            //填充星球
            cxt.fill();
            
            //恢复之前保存的画布内容
            cxt.restore();
            //执行完毕之后时间增加
            this.time+=1;
          }
        }
        
        //创建一个太阳对象的构造函数
        function Sun(){
          Star.call(this,0,0,20,0,"#F00","#f90");
        }
        //创建一个水星的对象构造方法
        function Mercury(){
          Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
        }
        //创建一个金星的对象构造方法
        function Venus(){
          Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
        }
        //创建一个地球的对象构造方法
        function Earth(){
          Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12");
        }
        //创建一个火星的对象构造方法
        function Mars(){
          Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
        }
        //创建一个木星的对象构造方法
        function Jupiter(){
          Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
        }
        //创建一个土星的对象构造方法
        function Saturn(){
          Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
        }
        
        //创建一个天王星的对象构造方法
        function Uranus(){
          Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
        }
        //创建一个天王星的对象构造方法
        function Neptune(){
          Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
        }
        
        
        
        //创建太阳对象实例
        var sun=new Sun();
        //创建水星对象实例
        var water=new Mercury();
        //创建金星对象实例
        var gold=new Venus();
        //创建一个地球对象实例
        var diqiu=new Earth();
        //创建一个火星对象实例
        var fire=new Mars();
        //创建一个木星对象实例
        var wood=new Jupiter();
        //创建一个土星对象实例
        var soil=new Saturn();
        //创建一个天王星对象实例
        var god=new Uranus();
        //创建一个海王星对象实例
        var sea=new Neptune();
        
        function move(){
          //清除画布
          cxt.clearRect(0,0,1000,1000);
          //画出轨道
          drawTrack();
          //画出每个星球
          sun.draw();
          water.draw();
          gold.draw();
          diqiu.draw();
          fire.draw();
          wood.draw();
          soil.draw();
          god.draw();
          sea.draw();
        }
        
        //使个星球进行运动
        setInterval(move,10);
      </script>
    </body>
  </html>

您可以修改框中代码后运行查看

画出自己的坦克并可以发单颗子弹（目前有点小bug）

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>画出自己的坦克</title>
    <style>
      #tankCanvas{background: #000;}
    </style>
  </head>
  <body>
    <canvas width="600" height="400" id='tankCanvas'>
      你的浏览器不支持画布
    </canvas>

    <script>
        var tankCanvas=document.getElementById('tankCanvas');
        var cxt=tankCanvas.getContext('2d');
        var heroX=150;
        var heroY=150;
        var dire=0;
        var speed=2;

        // 子弹定时器
        var timer2=null;
        // 子弹坐标
        var bulletX,bulletY,bulleDire;
        // 定义判断是否过界
        var yes=true;

        function drawHero(heroX,heroY,dire,speed){
          this.heroX=heroX;
          this.heroY=heroY;
          this.dire=dire;
          this.speed=speed;
          this.move=function(){
            switch (this.dire) {
              case 0:
              case 2:
                cxt.fillStyle='#BB8E00';
                cxt.fillRect(this.heroX,this.heroY,5,26);
                cxt.fillRect(this.heroX+15,this.heroY,5,26);
                cxt.fillRect(this.heroX+6,this.heroY+5,8,16);
                cxt.beginPath();
                cxt.fillStyle='#FDD900';
                cxt.arc(this.heroX+10,this.heroY+13,4,0,360,false);
                cxt.fill();
                cxt.closePath();
                cxt.beginPath();
                cxt.lineWidth=2;
                cxt.strokeStyle="#FDD900";
                cxt.moveTo(this.heroX+10,this.heroY+13);
                if(this.dire==0){
                  cxt.lineTo(this.heroX+10,this.heroY);
                }else{
                  cxt.lineTo(this.heroX+10,this.heroY+26);
                }
                cxt.closePath();
                cxt.stroke();
                break;
              case 1:
              case 3:
                cxt.fillStyle='#BB8E00';
                cxt.fillRect(this.heroX,this.heroY,26,5);
                cxt.fillRect(this.heroX,this.heroY+15,26,5);
                cxt.fillRect(this.heroX+5,this.heroY+6,16,8);
                cxt.beginPath();
                cxt.fillStyle='#FDD900';
                cxt.arc(this.heroX+13,this.heroY+10,4,0,360,false);
                cxt.fill();
                cxt.closePath();
                cxt.beginPath();
                cxt.lineWidth=2;
                cxt.strokeStyle="#FDD900";
                cxt.moveTo(this.heroX+10,this.heroY+10);
                if(this.dire==1){
                  cxt.lineTo(this.heroX+26,this.heroY+10);
                }else{
                  cxt.lineTo(this.heroX,this.heroY+10);
                }
                cxt.closePath();
                cxt.stroke();
                break;
            }
          }
          this.bullet=function(){
            cxt.fillStyle='#fff';
            if(bulletX>=600||bulletX<=0||bulletY>=400||bulletY<=0){
              clearInterval(timer2);
              yes=false;
            }
            switch (bulleDire) {
              case 0:
                cxt.fillRect(bulletX+9,bulletY,2,2);
                bulletY-=this.speed;
                break;
              case 1:
                cxt.fillRect(bulletX+24,bulletY+9,2,2);
                bulletX+=this.speed;
                break;
              case 2:
                cxt.fillRect(bulletX+9,bulletY+24,2,2);
                bulletY+=this.speed;
                break;
              case 3:
                cxt.fillRect(bulletX,bulletY+9,2,2);
                bulletX-=this.speed;
                break;
            }
          }
        }

        var hero=new drawHero(heroX,heroY,dire,speed);

        hero.move();
        window.onkeydown=function(e){
          var event=event||e;
          switch(event.keyCode){
            case 38://向上
              hero.heroY-=hero.speed;
              hero.dire=0;
              break;
            case 39://向右
              hero.heroX+=hero.speed;
              hero.dire=1;
              break;
            case 40://向下
              hero.heroY+=hero.speed;
              hero.dire=2;
              break;
            case 37://向左
              hero.heroX-=hero.speed;
              hero.dire=3;
              break;
            case 32://发子弹
              bulletX=hero.heroX;
              bulletY=hero.heroY;
              bulleDire=hero.dire;
              timer2=setInterval(hero.bullet,50);
              break;
          }
        }
        var timer=setInterval(function() {
          cxt.clearRect(0,0,600,400);
          hero.move();
        }, 100);
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

HTML5在线画图板支持保存图片到本地，点击查看实例

标签: canvas

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇“今天周几”决定你是哪种人
上一篇生命中那些你所不知道的大事

发表评论：

知向前端

html5画布canvas效果实例

使用html5画布canvas实现简单画板

使用html5画布画出简易时钟

使用html5画布画出八大星系（js使用方法实现）

使用html5画布画出八大星系（js使用对象实现）

画出自己的坦克并可以发单颗子弹（目前有点小bug）

HTML5在线画图板支持保存图片到本地，点击查看实例

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档