【重点突破】——使用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>

注：转载请注明出处

巴特西

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

最新文章

热门文章