【重点突破】——使用Canvas进行绘图图像

一、引言

本文主要是canvas绘图中绘制图像的部分，做了几个练习，综合起来，复习canvas绘图以及定时器的使用。

 

二、canvas绘制小飞机在指定位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小飞机静止位于上下左右中</title>
    <style>
        body{
            text-align:center;
        }
        canvas{
            background:#f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="c7" width="500" height="400">
        您的浏览器不支持canvas标签！
    </canvas>
    <script>
        var ctx = c7.getContext('2d');

        var p2 = new Image();
        p2.src = 'image/p2.png';
        console.log(p2.width);
        p2.onload = function(){
            ctx.drawImage(p2,0,0);
            ctx.drawImage(p2,500-p2.width,0);
            ctx.drawImage(p2,0,400-p2.height);
            ctx.drawImage(p2,500-p2.width,400-p2.height);
            ctx.drawImage(p2,250-200,200-100,400,200);
        }
    </script>
</body>
</html>

 

实现效果：

 

三、canvas绘制小飞机左右自动移动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左右移动的小飞机</title>
    <style>
        body{
            text-align:center;
        }
        canvas{
            background:#f0f0f0;
        }
    </style>
</head>
<body>
<canvas id="c7" width="500" height="400">
    您的浏览器不支持canvas标签！
</canvas>
<script>
    var ctx = c7.getContext('2d');

    var p3 = new Image();
    p3.src = 'image/p3.png';
    console.log(p3.width);
    p3.onload = function(){
        var x = 0;
        var xDirection = 1;
        var y = 0;
        setInterval(function(){
            //清除画布上已有的内容
            ctx.clearRect(0,0,500,400);

            ctx.drawImage(p3,x,y);
            x += 5*xDirection;

            if(x>=500-p3.width){
                xDirection = -1;
            }
            if(x<0){
                xDirection = 1;
            }
        },30);
    }
</script>
</body>
</html>

  

 

 四、canvas绘制随鼠标移动的小飞机

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>随鼠标移动的小飞机</title>
    <style>
        body{
            text-align:center;
        }
        canvas{
            background:#f0f0f0;
        }
    </style>
</head>
<body>
<canvas id="c7" width="500" height="400">
    您的浏览器不支持canvas标签！
</canvas>
<script>
    var ctx = c7.getContext('2d');

    var p3 = new Image();
    p3.src = 'image/p3.png';
    console.log(p3.width);
    p3.onload = function(){
        var x = 0;
        var y = 0;
        //监听鼠标在画布上方移动事件
        c7.onmousemove= function(e){
           x = e.offsetX;
           y = e.offsetY;
        };

        //使用定时器，不停的清画布，重绘飞机
        //小坑：飞机的定位点是左上角，要改变定位点距离，改变重绘的x.y
        setInterval(function(){
            ctx.clearRect(0,0,500,400);
            ctx.drawImage(p3,x-p3.width/2,y-p3.height/2);
        },20);
       
    }
</script>
</body>
</html>

 

五、canvas绘制以自己为中心旋转的小飞机

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>以指定点为轴中心旋转的小飞机</title>
    <style>
        body{
            text-align:center;
        }
        canvas{
            background:#f0f0f0;
        }
    </style>
</head>
<body>
<canvas id="c7" width="500" height="400">
    您的浏览器不支持canvas标签！
</canvas>
<script>
    var ctx = c7.getContext('2d');

    var p2 = new Image();
    p2.src = 'image/p2.png';
    console.log(p2.width);
    p2.onload = function(){
        var deg1 = 10;
        var deg2 = 20;

        setInterval(function(){
          //绘制飞机1——绕自己为中心旋转
          //平移+旋转+绘制+逆向旋转+逆向平移
            ctx.translate(100,50);
            ctx.rotate(deg1*Math.PI/180);
            ctx.drawImage(p2,-100,-50);
            ctx.rotate(-deg1*Math.PI/180);
            ctx.translate(-100,-50);

            deg1 += 10;

          //绘制飞机2——不旋转
            ctx.drawImage(p2,500-200,0);


          //绘制飞机3——绕自己为中心选转，速度是飞机1的2倍
            ctx.translate(100,350);
            ctx.rotate(deg2*Math.PI/180);
            ctx.drawImage(p2,-100,-50);
            ctx.rotate(-deg2*Math.PI/180);
            ctx.translate(-100,-350);

            deg2 += 20;
        },50)
    }
</script>
</body>
</html>

 

 更简单的方法：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>以指定点为轴中心旋转的小飞机</title>
    <style>
        body{
            text-align:center;
        }
        canvas{
            background:#f0f0f0;
        }
    </style>
</head>
<body>
<canvas id="c7" width="500" height="400">
    您的浏览器不支持canvas标签！
</canvas>
<script>
    var ctx = c7.getContext('2d');

    var p2 = new Image();
    p2.src = 'image/p2.png';
    console.log(p2.width);
    p2.onload = function(){
        var deg1 = 10;
        var deg2 = 20;

        setInterval(function(){
          //绘制飞机1——绕自己为中心旋转
          //存盘+平移+旋转+绘制+恢复存盘
            ctx.save(); 
            ctx.translate(100,50);
            ctx.rotate(deg1*Math.PI/180);
            ctx.drawImage(p2,-100,-50);
            ctx.restore();

            deg1 += 10;

          //绘制飞机2——不旋转
            ctx.drawImage(p2,500-200,0);


          //绘制飞机3——绕自己为中心选转，速度是飞机1的2倍
            ctx.save(); 
            ctx.translate(100,350);
            ctx.rotate(deg2*Math.PI/180);
            ctx.drawImage(p2,-100,-50);
            ctx.restore();

            deg2 += 20;
        },50)
    }
</script>
</body>
</html>

 

 注：转载请注明出处

posted @ 2017-10-01 21:03  柳洁琼Elena  阅读(510)  评论(0)  编辑  收藏  举报